写在最前：本文转自掘金
关于Pinia
在vue3中，Pinia 替代了Vuex，简化了数据流修改，增加了插件的支持，成为了Vue3全家桶成员之一。
具体实例代码
创建 Pinia 实例
// index.ts
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate) // 数据持久化
export default pinia
模块语法
其实有两种语法，分为
- Option Stores 语法
- Setup Stores 语法
先看第一种
传递带有 state、getters 和 actions 属性的 Options 对象给 defineStore() 就可以定义一个 Store。
// counter.ts
import { defineStore } from 'pinia'
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 对应。
这种写法的好处就是结构非常清晰，容易上手。
再看第二种
// counter.ts
import { ref, computed } from 'vue'
import { defineStore } from 'pinia'
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 对应（使用 reactive 亦可）、computed 与 getters 对应、function 与 actions 对应。
这和 Vue3 新推出的 Composition API（组合式 API）非常类似！这样的话，在使用 Vue3 和 Pinia 的时候，就能统一语法了。
组件内使用
import { useCounterStore } from '@/stores/counter'
const counterStore = useCounterStore ()
counterStore.increment() // 更新数据
console.log(configStore.count) // 获取数据
组件外使用
如果你准备在 Vue3 的 Setup 语法外引入 Pinia 的 Store，例如 useCounterStore。
直接 import { useCounterStore } from "@/store/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/xxxxxx" 即可！
