🍍 Pinia 的 Setup Stores 语法太香了

“我报名参加金石计划1期应战——瓜分10万奖池，这是我的第1篇文章，点击检查活动详情”

关于大菠萝

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

这里是它的英文官方文档，中文文档好像不是官方的，而且当时翻译的不全面（比如 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" 即可！

集成好 Pinia 的模板

最终自荐一下这个轻量级 Vue3 后台管理模板，集成好了 Pinia 而且语法正是 Setup Stores！

GitHub: v3-admin-vite

Gitee: v3-admin-vite