Pinia 的 Setup Stores 语法太香了

Posted 2022-12-12 SHERlocked93

作者：pany

原文：https://juejin.cn/post/7143504636496855077

关于大菠萝

如果你还不了解 Pinia，那你可以将它理解为 Vuex5（因为 Vuex 5 不会出了），是 Vue3 全家桶成员之一。

这里是它的英文官方文档^[1]，中文文档好像不是官方的，并且当前翻译的不全面（比如 Setup Stores 就没有在中文文档中出现），不是很推荐。

先来看看最常见的 Option Stores 语法

传递带有 state、getters 和 actions 属性的 Options 对象给 defineStore() 就可以定义一个 Store：

export const useCounterStore = defineStore('counter', 
  state: () => (
    count: 0
 ),
  getters: 
    doubleCount: (state) => state.count * 2
  ,
  actions: 
    increment() 
      this.count++
    
  
)

这种语法与 Vuex 中定义 Store 的语法非常近似，但是少了 Mutation 字段。

不仅如此，这种写法也和 Vue2 的 Options API（选项式 API）结构类似：state 与 data 对应、getters 与 computed 对应、actions 与 methods 对应。

这种写法的好处就是结构非常清晰，容易上手，特别是对刚从 Vue2 和 Vuex 转到 Pinia 的开发者！

安利 Setup Stores 语法

但 Setup Stores 语法更灵活、更函数：

export const useCounterStore = defineStore('counter', () => 
  const count = ref(0)
  const doubleCount = computed(() => count.value * 2)
  function increment() 
    count.value++
  

  return  count, doubleCount, increment 
)

在这种语法中，ref 与 state 对应、computed 与 getters 对应、function 与 actions 对应。

想必写过 Vue3 朋友就能一眼看出来这和 Vue3 新推出的 Composition API（组合式 API）非常类似！这样的话，在使用 Vue3 和 Pinia 的时候，就能统一语法了。

如果在 Vue3 的 Setup 语法外使用 Pinia 呢？

如果你准备在 Vue3 的 Setup 语法外引入 Pinia 的 Store，例如 useCounterStore。

直接 import useCounterStore from "@/store/modules/xxxxxx" 是不行的，你得像这样：

import store from "@/store"

export const useCounterStore = defineStore('counter', () => 
  const count = ref(0)
  const doubleCount = computed(() => count.value * 2)
  function increment() 
    count.value++
  

  return  count, doubleCount, increment 
)

/** 在 setup 外使用 */
export function useCounterStoreHook() 
  return useCounterStore(store)

然后引入 import useCounterStoreHook from "@/store/modules/xxxxxx" 即可！

参考资料

[1]

https://pinia.vuejs.org/: https://link.juejin.cn?target=https%3A%2F%2Fpinia.vuejs.org%2F

最后

如果你觉得这篇内容对你挺有启发，我想邀请你帮我个小忙：

1. 点个「喜欢」或「在看」，让更多的人也能看到这篇内容

2. 我组建了个氛围非常好的前端群，里面有很多前端小伙伴，欢迎加我微信「sherlocked_93」拉你加群，一起交流和学习

3. 关注公众号「前端下午茶」，持续为你推送精选好文，也可以加我为好友，随时聊骚。

点个喜欢支持我吧，在看就更好了