Pinia 存储与可组合函数

Question

我想弄清楚使用 Pinia store 而不是仅使用纯 ts 可组合函数（例如

const userName = ref('')

export default function useUser() {

  const setUserName(name: string) => {
    userName.value = name
  }

  return {
    userName: readonly(userName),
    setUserName
  }

}

然后使用

const {userName, setUserName} = useUser()

因为，例如在此 Vitesse 示例https://github.com/antfu/vitesse/blob/main/src/stores/user.ts中，Pinia 的用法看起来非常相似。

感谢您的澄清:)

Answer 1

我找到了这个解释，这对我来说很有意义：

我觉得您可能有点忽略了可组合项和组合 API 的要点 - 它们作为“功能优先”而不是“组件优先”（字面意思是通过组合）组织代码的方式非常有用。这意味着可组合项是共享功能，而不是状态。

某些功能可能包括内部（共享、应用程序范围）状态，但这并不是可组合项本身的目的。另一方面，Pinia 专门用于共享状态。它可能包括管理所述状态的功能，但如果没有该共享状态，它就不存在。

Vue Use 是查看此“实际情况”的好地方，它是一组常用的可组合项。有些可能包含内部状态，但大多数不包含，因此只会增强组件的功能，也许会添加一些本地状态（与全局共享状态相反）

来源： https: //www.reddit.com/r/vuejs/comments/t88xzy/comment/hzmoet2/ ?utm_source=share&utm_medium=web2x&context=3

Answer 2

目前，在一个中型项目的开始阶段，我也在为这个选择而苦苦挣扎。我认为 Pinia 实际上不如普通的可组合项，因为 Pinia 会在没有明显原因的情况下制造问题，并且不提供任何回报。

1. Pinia 打破了对象解构，这非常方便：

   const {userName} = useUserStore(); // broken! reactivity lost
   

   与

   const {userName} = useUserStore(); // broken! reactivity lost
   

   有storeToRefs，但这是一个愚蠢的仪式，而且双重愚蠢，因为你必须使用来自 的引用storeToRefs，但来自原始商店的方法：

   const store = useUserStore();
   const {userName, setUserName} = storeToRefs(store); // setUserName is broken!
   

   当您从存储定义返回 ref 时，这也是一个非常奇怪的 API，但随后它就变成了反应式对象的非 ref 字段。

2. Pinia 做出了虚假承诺 - 宣称的开发工具支持实际上是初级的。带有官方插件的官方开发工具中没有时间线或时间旅行。您只能在单独的开发工具选项卡中获取商店，但您仍然可以在没有 Pinia 的情况下获得可组合项的状态。

3. 由于打破了裁判，皮尼亚提倡一种将反应性隐藏在抹布下的风格，而不是清楚地识别什么是裁判，什么不是裁判，从而增加了错误。