使用 Pinia 的五个技巧

免费体验 Gpt4 plus 与 AI作图神器，我们出的钱 体验地址：体验

在这篇文章中，想与大家分享使用 Pinia 的五大技巧。

以下是简要总结：

1. 不要创建无用的 getter
2. 在 Option Stores 中使用组合式函数（composables）
3. 对于复杂的组合式函数，使用 Setup Stores
4. 使用 Setup Stores 注入全局变量，如路由器（Router）
5. 如何创建私有状态

1.不要创建无用的 getter

你并不需要为所有事情使用 getter。在 Vuex 中有一个普遍的误解，认为你应该总是通过 getter 访问状态。

这是不正确的。

当你需要从状态中计算出某些东西时，getter 是有用的，例如，如果你有一个待办事项列表，想知道有多少已完成，你可以为此创建一个 getter。

在生产代码中经常看到过这样的代码：

代码语言：javascript复制

export default Vuex.Store({
  state: () => ({ counter: 0 }),
  getters: {
    // 完全无用的 getter
    getCount: state => state.counter,
  },
})

这在 Vuex 中只是不必要的样板代码，在 Pinia 中也是如此。你可以直接访问状态：

代码语言：javascript复制

const counterStore = useCounterStore()
counterStore.counter // 0 ✅

PS:大多数时候你不需要 storeToRefs()（或 toRef()）。你可以直接使用 store，Vue 的响应式真的很方便