跨页面更新Svelte Stores值无响应问题求助

我是Svelte（及整个Web开发）新手，尝试从另一页面更新Svelte Store的值。首页展示该Store的值，Page1页面有按钮用于修改值，但点击按钮后值并未更新。以下是相关代码、文件结构，请求技术帮助：

文件结构 #

Store代码（src/stores/Store.js） #

import { writable } from 'svelte/store'

export const value = writable(1);

首页代码（src/routes/+page.svelte） #

<script>
    import  { value } from '../stores/Store.js';
    let number = $value;
</script>

<p> {number} </p>

Page1代码（src/routes/page1/+page.svelte） #

<script>
    import  { value }  from '../../stores/Store.js';

    function increment() {
        value.update(n => n + 1);
        console.log($value)
    }
</script>

<button on:click={increment}>
    +
</button>

问题原因及解决方法 #

问题出在首页的let number = $value这行代码：$value仅在组件初始化时获取Store的当前值，赋值给普通变量number后，Store后续更新不会自动同步到number。

方案1：直接在模板中使用Store的自动订阅语法

无需中间变量，直接在模板里用$value，Svelte会自动处理订阅和更新：

<script>
    import  { value } from '../stores/Store.js';
</script>

<p> {$value} </p>

方案2：手动订阅Store更新（适合需要处理中间逻辑的场景）

如果必须使用中间变量，可通过手动订阅Store来同步值，同时记得在组件销毁时取消订阅避免内存泄漏：

<script>
    import { onDestroy } from 'svelte';
    import  { value } from '../stores/Store.js';
    
    let number;
    // 订阅Store，值变化时更新number
    const unsubscribe = value.subscribe(val => {
        number = val;
    });
    
    // 组件销毁时取消订阅
    onDestroy(unsubscribe);
</script>

<p> {number} </p>

另外确认了导入路径是正确的，无需调整。

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