Pinia的setup store写法

如果你对Pinia不了解，但Vuex你应该知道，它是Vue的一个状态管理仓库。Vuex的目前版本为4.0x，你可以将Pinia理解为下一代的Vuex。在现在的Vue3官方文档中，Pinia已被官方推荐使用。

先看看Option Store的语法

import { defineStore } from 'pinia'

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

通过defineStore() 就可以定义一个 Store，里面有state,getters,actions。这种语法与 Vuex中定义 Store 的语法非常近似，只是少了 mutation 。

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

这种Option Store 的写法，结构很清楚，思路很简单，与Vuex相似，使用起来容易上手。

再看看 Setup Store的语法

import { defineStore } from 'pinia'
import { ref, computed } from 'vue'

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

这对于习惯了Vue3的朋友来说就是一种享受，一眼便能看出来这就类似于Vue3推出的Composition API（组合式 API）。这种写法更加灵活，这里的ref与state对应，computed与getter对应，定义的函数function与action对应。

两种写法都有属于它自己的优点，在开发时选择适合自己的就好了。