Pinia介绍

Pinia 是一个用于 Vue 的状态管理库，类似 Vuex，是 Vue 的另一种状态管理方案。Pinia 主打简单和轻量，其大小仅有 1KB，在功能用法上主要包括 store、state、getter、action 等概念。

Pinia 采用如下命令安装：

npm install pinia@next

pinia@next 版本兼容 Vue 3，其大部分 API 和 Vuex 类似，并且结合 Vue 3 组合式 API 使用起来更加方便。

在 Pinia 中，可以自由地将多个 store（Vuex 更推荐使用一个 store）定义在不同的模块文件中，使用时直接引入这个模块即可，便于拆分管理，例如创建一个 user.js，代码如下：

// stores/user.js
import { defineStore } from 'pinia'

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

使用时，直接导入这个模块，代码如下：

import { useCounterStore } from '@/stores/user'
export default {
    setup() {
        const counter = useCounterStore()
        // 直接修改state
        counter.count++
        // $patch方法修改state
        counter.$patch({ count: counter.count + 1 })
        // 调用action
        counter.increment()
    },
}

在 Pinia 中，可以直接对 state 进行修改（不同于 Vuex 不推荐这么做），也可以调用 action 即通过 $patch 方法同时对多个 state 进行修改。

Pinia 符合直觉的状态管理方式，让使用者回到了模块导入导出的原始状态，使状态的来源更加清晰可见，但是目前来说 Pinia 还处于快速更新阶段，相关社区和文档还不够完善，还是不如 Vuex 使用者多，就目前来说读者可以先行了解，对于状态管理还是更加推荐 Vuex。