一、简介
Pinia 是 Vue 的专属状态管理库，它允许你跨组件或页面共享状态。它跟 Vuex 有一定的相似度，但还是有很大的区别。
愿意看这篇博客的人，想必已经看过了官方文档，官方文档很详细，包含各种使用情景和理论，因此本文不说理论，只说具体的使用方法，想深入研究的建议去看官方文档，本文适合拿来即用。
二、使用方法
1. 安装
yarn add pinia
# 或者使用 npm
npm install pinia
2. 引入
main.ts
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
const pinia = createPinia()
createApp(App).use(pinia).mount('#app') // vue3 的简写语法
不熟悉vue3简写语法的可以按照下面的方式去写，效果是一样的
main.ts
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
const pinia = createPinia()
const app = createApp(App)
app.use(pinia)
app.mount('#app')
3. 创建文件
在 src 文件中，创建 store 文件，里面按模块创建 ts 文件（也可以是 js）。
注意： pinia 不需要创建 modules 文件来区分模块化，这是它和 vuex 的区别。
以登录后保存用户信息模块举例：
注意： 命名方式建议统一规范 use + id + store，示例 useUserStore ，id 为 user。
store/user.ts
import { defineStore } from 'pinia'
export const useUserStore = defineStore('user', {
state: () => ({
userInfo: {}
}),
actions: {
SetUserInfo(data: any) {
this.userInfo = data
}
}
})
4. 使用
先引入模块，再将引入的模块对象赋值给变量 store （命名随意），如果不需要修改数据，用 const 声明变量，需要修改数据则使用 let 声明。
注意：引入的模块对象名要与模块中 export const 声明的一致。
.ts or .vue
import { useUserStore } from '@/store/user'
const store: any = useUserStore()
console.log(store.userInfo)
5. 修改数据
修改数据多种方法，可以直接修改，也可以使用 actions 修改。
方法1：直接修改
.ts or .vue
import { useUserStore } from '@/store/user'
const store = useUserStore()
store.userInfo = obj // obj 指新值
方法2：借助 actions 修改
.ts or .vue
import { useUserStore } from '@/store/user'
const store = useUserStore()
store.SetUserInfo(obj) // obj 指新值
方法3：多属性修改
store/user.ts
import { defineStore } from 'pinia'
export const useUserStore = defineStore('user', {
state: () => ({
name: null,
age: null,
sex: null,
}),
})
上面的方法都是用来修改单个属性的，如果你需要一次修改多个属性，虽然你可以重复操作上面的方法，但是 pinia 提供了新的方法，我更推荐使用官方推荐的方法。
.ts or .vue
import { useUserStore } from '@/store/user'
const store = useUserStore()
// 你可以这样去修改（不建议）
store.name = '张三'
store.age = 24
store.sex = '男'
// 推荐使用下面这种方式 √
store.$patch({
name: '张三',
age: 24,
sex: '男',
})
修改数据的场景及方法当然不止这些，有些复杂的数据修改仅靠这些是难以实现的，不过本文的目的是简单讲解 pinia 的使用方法，就不多做赘述了，想具体了解推荐去看 Pinia 官方文档。
三、持久化存储
pinia 和 vuex 一样，数据是短时的，只要一刷新页面，数据就会恢复成初始状态，为了避免这个问题，可以对其采用持久化保存方法。
持久化保存的原理是在 pinia 中数据更新时，同步保存到 localStorage 或 sessionStorage 中，刷新后从本地存储中读取数据，你可以选择自己去写，但是实现起来并不像想象中那么容易，当然，也没那么难。
我推荐使用插件去实现持久化存储，这样更便捷，省时省力。推荐插件为 pinia-plugin-persist，当然，实现持久化存储的插件肯定不止这一种，想用别的也无所谓，本文仅对这款插件讲解使用方法。
1. 安装插件
npm i pinia-plugin-unistorage -D
2. 引入插件
和引入 pinia 一样，在 main.ts 中引入。
mian.ts
import { createSSRApp } from 'vue'
import * as Pinia from 'pinia'
import { createUnistorage } from 'pinia-plugin-unistorage'
export function createApp() {
const app = createSSRApp(App)
const store = Pinia.createPinia()
// 关键代码 👇
store.use(createUnistorage())
app.use(store)
return {
app,
Pinia // 此处必须将 Pinia 返回
}
}
3. 使用插件
import { defineStore } from 'pinia'
export const useStore = defineStore('main', {
state() {
return {
someState: 'hello pinia'
}
},
unistorage: true // 开启后对 state 的数据读写都将持久化
})
