0

我有存储对象数组。商店是从具有“完成”和“取消”按钮的弹出组件访问的。我的目标是仅在用户单击“完成”按钮时更新商店。如果弹出窗口关闭或单击“取消”按钮，我不想更新商店。我认为我可以使用局部变量来分配 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;
4

1 回答 1

1

这不是由于商店的性质，而是由于 JavaScript 本身的工作方式。当您将数组从商店传播到本地数组时，您只是传播对实际对象的引用。所以数组中的项目仍然指向内存中的相同位置。

如果您的对象数组是“浅”的（即没有嵌套对象），您可以使用 map and spread 技术来代替：

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

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

于 2021-09-22T16:19:10.347 回答