如何在Svelte中更新数据存储字段？解决页面未同步问题

问题原因 #

你直接修改了从store中获取的对象属性，但Svelte的writable store只有在通过其提供的set或update方法更新值，且值的引用发生变化时，才会通知所有订阅组件更新。直接修改对象属性不会改变对象引用，因此store无法感知到变化，页面也就不会同步更新。

解决方案 #

方案1：使用set方法更新（创建新对象） #

修改Child.svelte中的update_sum函数，创建新对象并通过set方法更新store：

<script context="module">
    import { get } from 'svelte/store';
    import { board } from './data_store';
    
    export function update_sum() {
        const board_data = get(board);
        // 创建包含新sum值的新对象
        const newBoard = { ...board_data, sum: 12 };
        // 调用store的set方法更新值
        board.set(newBoard);
        return newBoard.sum;
    }
</script>

方案2：使用update方法更新（更简洁） #

利用store的update方法直接修改并返回新值：

<script context="module">
    import { board } from './data_store';
    
    export function update_sum() {
        let newSum;
        // update方法接收当前值，返回新值
        board.update(current => {
            newSum = 12;
            return { ...current, sum: newSum };
        });
        return newSum;
    }
</script>

方案3：封装store的更新方法（推荐，适合大型项目） #

在data_store.js中封装专门的更新方法，使store逻辑更内聚：

import { writable } from 'svelte/store';

const initialState = {
    sum: 1,
};

const { subscribe, update } = writable(initialState);

export const board = {
    subscribe,
    // 封装更新sum的方法
    updateSum: (newSum) => {
        update(current => ({ ...current, sum: newSum }));
    }
};

然后在Child.svelte中调用封装好的方法：

<script context="module">
    import { board } from './data_store';
    
    export function update_sum() {
        const newSum = 12;
        board.updateSum(newSum);
        return newSum;
    }
</script>

验证修改 #

修改后点击按钮，页面上的data_sto {$board.sum}会同步更新为12，同时控制台输出的$board也会显示更新后的值。

内容的提问来源于stack exchange，提问作者Psionman