Svelte响应式变量声明不更新问题求助

你遇到的问题本质是Svelte的响应式检测逻辑导致的：Svelte通过值的变化触发响应式更新，对于数组这类引用类型，直接用push、pop修改原数组时，数组的引用没有改变，store不会发出更新通知，因此依赖它的变量（比如numberOfSelectedItems）不会自动更新。

你的临时解决方案虽然能工作，但手动维护myLength属于冗余操作，完全可以用更符合Svelte设计的方式解决，以下是几种最优方案：

方案1：替换整个数组（推荐） #

不要直接修改原数组，而是通过扩展运算符创建新数组替换原数组，这样会改变引用，触发store的更新：

<script lang="ts">
    import { MyStore } from "../stores/MyStore";
    $: numberOfSelectedItems = $MyStore.items.length;

    function myFunction(selectedItem) {
        // 创建新数组替换原数组，触发响应式更新
        $MyStore.items = [...$MyStore.items, selectedItem];
    }
</script>

<p>You've selected {numberOfSelectedItems} items.</p>

方案2：在Store内部封装修改方法 #

如果你的Store是用writable创建的，推荐在Store文件里封装添加元素的方法，确保每次修改都返回新的状态对象：

// stores/MyStore.ts
import { writable } from 'svelte/store';

// 初始化Store
const MyStore = writable({ items: [] });

// 封装添加元素的方法
export function addItemToStore(item) {
    MyStore.update(currentState => {
        // 返回新的状态对象，触发Store更新
        return { ...currentState, items: [...currentState.items, item] };
    });
}

export { MyStore };

然后在组件中调用这个方法：

<script lang="ts">
    import { MyStore, addItemToStore } from "../stores/MyStore";
    $: numberOfSelectedItems = $MyStore.items.length;

    function myFunction(selectedItem) {
        addItemToStore(selectedItem);
    }
</script>

<p>You've selected {numberOfSelectedItems} items.</p>

方案3：手动触发Store更新 #

如果必须要修改原数组（比如性能考虑），可以在修改后手动调用set方法通知Store更新：

<script lang="ts">
    import { MyStore } from "../stores/MyStore";
    $: numberOfSelectedItems = $MyStore.items.length;

    function myFunction(selectedItem) {
        $MyStore.items.push(selectedItem);
        // 手动传入当前状态，触发Store更新
        MyStore.set($MyStore);
    }
</script>

<p>You've selected {numberOfSelectedItems} items.</p>

以上方案都能避免手动维护myLength的冗余操作，完全利用Svelte的响应式机制自动更新变量。

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