创建简易Svelte用户Store时遭遇set函数未定义错误求助

嘿，我来帮你搞定这个问题！你碰到的TypeError: userStore.set is not a function错误原因其实很直观——你自定义的userStore对象里根本没定义set方法，但你在setUser函数里却尝试调用userStore.set(user)，这当然会抛出错误啦。

问题根源分析 #

你用svelte/store的writable(null)创建的user变量是一个标准的Svelte writable store实例，它确实自带set、subscribe和update三个核心方法。但你构建的userStore只把user.subscribe挂载到了自己身上，并没有引入user.set方法，也没有在userStore内部定义这个方法，所以调用userStore.set自然找不到对应的函数。

解决方法 #

这里有两种简单的修正方式，你可以根据自己的需求选择：

方式一：直接调用原始store的set方法 #

既然user实例本身就有set方法，那在setUser里直接用它就行，不用绕userStore：

const userStore = {
  subscribe: user.subscribe,
  setUser: (userData) => {
    user.set(userData); // 直接调用原始user实例的set方法
  },
  saveUserProperty: (prop, value) => {
    // 顺便帮你修正这个方法，原来的写法不会更新store里的用户数据
    user.update(currentUser => {
      if (!currentUser) return currentUser;
      return { ...currentUser, [prop]: value };
    });
  },
  delete: () => {
    user.set(null); // 同样这里也直接用user.set
  }
};

方式二：把原始store的set方法挂载到userStore上 #

如果你希望userStore本身也暴露set方法（比如有些场景需要直接调用userStore.set），可以把user.set加到userStore的属性里：

const userStore = {
  subscribe: user.subscribe,
  set: user.set, // 挂载原始store的set方法
  setUser: (userData) => {
    userStore.set(userData); // 现在调用就没问题了
  },
  saveUserProperty: (prop, value) => {
    user.update(currentUser => {
      if (!currentUser) return currentUser;
      return { ...currentUser, [prop]: value };
    });
  },
  delete: () => {
    userStore.set(null);
  }
};

额外提示：修正saveUserProperty方法 #

你原来的saveUserProperty写法(prop, value) => (userStore.prop = value)是给userStore对象本身添加属性，完全不会修改store内部存储的用户数据。上面的代码里已经帮你改成了用user.update方法，这才是Svelte store更新数据的正确方式——通过update接收当前值，返回新的用户对象，这样store才会触发订阅更新。

排查思路总结 #

• 先看错误信息定位问题：明确是userStore.set不存在，那就要检查userStore的属性结构；
• 回忆Svelte writable store的特性：原始实例自带set/subscribe/update，但自定义store需要手动挂载你需要的方法；
• 检查函数内部的调用对象：不要混淆自定义的userStore和原始的user实例，确保调用的是正确对象上的方法。

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