使用Vite+Svelte开发SPA，开发服务器中Svelte Store出现缓存问题？

这不是正常现象，问题根源基本是Vite的热模块替换（HMR）机制导致的。

原因分析 #

Svelte Store通常是模块顶层导出的单例实例，Vite在开发模式下的HMR更新会尽可能保留模块状态以提升开发体验，这就导致Store实例不会随页面普通刷新而重置——普通刷新时浏览器可能复用缓存的模块，HMR也会保留Store的旧值，只有强制刷新才会完全重新加载所有模块，初始化新的Store实例。生产环境没有这个问题，是因为生产构建会完全重新打包，每次页面刷新都会重新初始化所有模块，自然不会残留旧值。

解决办法 #

• 给Store添加重置逻辑：把Store改成工厂函数创建的方式，同时导出重置方法，再结合Vite的HMR钩子在模块更新时自动重置：

  // store.js
  import { writable } from 'svelte/store';
  
  function createMyStore() {
    const initialState = { /* 你的初始状态 */ };
    const { subscribe, set, update } = writable(initialState);
    
    return {
      subscribe,
      update,
      reset: () => set(initialState)
    };
  }
  
  export const myStore = createMyStore();
  
  // 开发环境下，HMR更新时重置Store
  if (import.meta.hot) {
    import.meta.hot.accept(() => {
      myStore.reset();
    });
  }
  

• 路由切换时重置：如果用了路由库，在进入新页面的路由钩子中调用Store的重置方法，确保页面切换时Store回到初始状态。
• 避免模块顶层直接存可变状态：不要在Store模块顶层定义可变的状态变量，全部通过Store的方法来管理，减少HMR状态残留的可能。

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