无需覆盖的 Svelte Store 和临时变量

Question

我的商店是对象数组。可从具有 'Done' 和 'Cancel' 按钮的弹出组件访问商店。我的目标是仅在用户单击 'Done' 按钮时更新商店。如果弹出窗口关闭或单击 'Cancel' 按钮，我不想更新商店。我以为我可以使用局部变量来将 Store 的值分配给，但即使我更新局部变量，它也会更新 Store。这就是品牌旗舰店的运作方式吗？

这里是弹窗组件

<script>
    import Button from "./Button.svelte";
    import CategorySectionStore from '../stores/categorySectionStore';
    import CategoryListStore from '../stores/categoryListStore';
    import AccountSectionStore from '../stores/accountSectionStore';
    import AccountListStore from '../stores/accountListStore';
    import PayeeListStore from '../stores/payeeListStore';

    let categorySections = [...$CategorySectionStore];
    let categoryLists = [...$CategoryListStore];
    let accountSections = [...$AccountSectionStore];
    let accountLists = [...$AccountListStore];
    let payeeLists = [...$PayeeListStore];

    export let togglePopup = () => {};
    export let filter;

    const toggleCategoryGroup = (groupID) => {
        for (let list of categoryLists) {
           // console.log(list)
           // console.log('gid: ' + groupID)
            if (list.Id === groupID) {
                list.Checked = !list.Checked;
            }
        }

    }
    
</script>

<div class="popup {filter}">
    <p class="title">{filter}</p>
    <div class="selection">
        <ul>
            <li>Select All</li>
            <li>Select None</li>
        </ul>
    </div>
    <div class="list">
            {#if filter === 'Categories'}
                <ul>
                {#each categorySections as catSection}
                    <li class="section">
                        <input type=checkbox group={catSection.Name} value={catSection.Name} checked={catSection.Checked} on:click={() => toggleCategoryGroup(catSection.Id)}>{catSection.Name}
                    </li>
                    {#each categoryLists as catList}
                        {#if catList.Id === catSection.Id}
                            <li class="section-item"><input type=checkbox group={catSection.Name} value={catList.subName} checked={catList.Checked}>{catList.subName}</li>
                        {/if}
                    {/each}
                {/each}
                </ul>
            {:else if filter === 'Accounts'}
                <ul>
                {#each accountSections as accountSection}
                    <li class="section"><input type=checkbox group={accountSection.Name} value={accountSection.Name} bind:checked={accountSection.Checked}>{accountSection.Name}</li>
                    {#each accountLists as accountList}
                         {#if accountList.Type === accountSection.Name}
                            <li class="section-item"><input type=checkbox group={accountSection.Name} value={accountList.Name} bind:checked={accountList.Checked}>{accountList.Name}</li>
                         {/if}
                    {/each}
                {/each}
                </ul>
            {:else}
                <ul>
                {#each payeeLists as payeeList}
                    <li class="section-item"><input type=checkbox group="payeeSection" value={payeeList.Name} checked={payeeList.Checked}>{payeeList.Name}</li>
                {/each}
                </ul>
            {/if}
    </div>
    <div class="buttons">
        <Button type="secondary" on:click={togglePopup}>Cancel</Button>
        <Button>Done</Button>
    </div>
</div>

这是一家商店。它们都是相同的，只是名称不同。

import { writable } from 'svelte/store';

export const CategorySectionStore = writable([]);

export default CategorySectionStore;

Answer 1

这不是因为商店的性质，而是因为 JavaScript 本身的运作方式。当您将数组从商店传播到本地数组时，您只是将 reference 传播到实际对象。所以数组中的项仍然指向内存中的同一个位置。

如果您的对象数组是 'shallow'（即没有嵌套对象），您可以改用映射和传播技术：

const myarray = otherarray.map(item => ({ ...item }))

这将创建具有相同属性的全新对象。但如前所述，如果这些属性之一是它自己的对象，它将再次成为引用。

无需覆盖的 Svelte Store 和临时变量

Svelte Store & Temp Variable Without Overwriting

svelte

svelte-store

svelte-3