如何在使用svelte-router-spa的Svelte.js项目中定义跨多页面的全局变量

嘿，这个坑我之前踩过！你现在遇到的问题是因为直接导入普通变量时，每个组件都会创建该变量的独立实例——当你切换页面，旧组件被销毁、新组件挂载时，新组件里的basket就是一个全新的空数组，自然数据就重置了。下面给你几个实用的解决方案，按推荐程度排序：

1. 使用Svelte自带的响应式Store（最推荐） #

Svelte内置了专门的状态管理工具Store，天生支持全局共享和响应式更新，完美适配你的场景。步骤如下：

首先创建一个单独的Store文件：

// src/stores/basket.js
import { writable } from 'svelte/store';

// 初始化购物车为空数组
export const basket = writable([]);

然后在你的index和productdetails组件中导入并使用：

// 组件中导入
import { basket } from '../stores/basket.js';

// 添加商品到购物车的示例函数
function addItemToBasket(product) {
  // 使用update方法修改Store，它会接收当前数组并返回新数组
  basket.update(currentItems => [...currentItems, product]);
}

在模板里使用时，只要在Store变量前加$符号就能自动订阅响应式更新：

<!-- 组件模板部分 -->
<h3>购物车商品</h3>
{#each $basket as item}
  <div class="card">{item.name}</div>
{:else}
  <p>购物车是空的</p>
{/each}

这种方式下，无论你切换哪个页面，所有组件访问的都是同一个Store实例，数据不会丢失，而且修改后所有用到$basket的地方都会自动更新。

2. 创建单例模块（简单但非响应式） #

如果你不需要响应式更新（比如只是单纯存数据，手动处理UI刷新），可以用JS模块的单例特性来实现：

创建一个全局变量文件：

// src/utils/basket.js
export const basket = { items: [] };

然后在组件中导入：

import { basket } from '../utils/basket.js';

// 添加商品的示例
function addItem(item) {
  basket.items.push(item);
  // 注意：因为这是普通对象，修改后组件不会自动更新
  // 如果需要刷新UI，你可以手动触发响应：$: basket.items;
}

JS模块在整个应用中只会被加载一次，所以所有组件导入的basket都是同一个对象，切换页面时数据不会重置。但缺点是它不是响应式的，修改数据后需要手动处理组件更新。

小提示 #

如果你的项目后续会有更多全局状态需要管理，建议直接用Svelte Store，它还有readable、derived等高级用法，能覆盖大部分状态管理场景。

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