带你熟练掌握在vue中使用pinia全局状态管理

与vuex的区别

去除了 mutation 选项。省去了复杂的disptach和commit流程&＃xff0c;直接通过模块实例调用实例的actions中的方法即可触发对应action&＃xff1b;在组件中直接可以通过模块实例的$patch修改store状态或者通过action来间接修改store状态。响应式数据原理是proxy&＃xff0c;使得数据的增加或者删除字段都具备响应式。

安装

yarn add pinia


引入pinia

在main.ts中注册pinia插件

import {createPinia} from &＃39;pinia&＃39; // vue3
// import {PiniaVuePlugin} from &＃39;pinia&＃39; // vue2const app&＃61;createApp(App)
app.use(createPinia())
app.mount(&＃39;#app&＃39;)


创建状态目录

在src下创建文件夹store&＃xff0c;在store下创建文件index.ts&＃xff0c;a.ts&＃xff0c;b.ts。a.ts和b.ts分别是管理某个状态的模块&＃xff0c;index.ts用来整合这些模块。

pinia模块组成

state、actions、getters。

创建pinia模块

对应选项的含义看代码注释。
1.在a.js编写如下代码

import {defineStore} from "pinia"export default defineStore(&＃39;a&＃39;,{ // a是模块的命名空间&＃xff0c;不能和其他模块的一样state:()&＃61;>({ // state是一个函数&＃xff0c;函数返回值为管理的状态x:0,y:0,}),})


2.在b.ts编写如下代码

import {defineStore} from "pinia"export default defineStore(&＃39;b&＃39;,{state:()&＃61;>({name:&＃39;b&＃39;,age:18,}),actions:{print(msg:string){ // 同步actionconsole.log(msg)},async setAge(newAge:number){ // 异步action// 模拟接口const setAgeReq&＃61;<T>(age:T)&＃61;>new Promise<T>((rel)&＃61;>{setTimeout(()&＃61;>{rel(age)},1000)})const age&＃61;await setAgeReq(newAge)// 在action中通过实例来直接修改状态this.age&＃61;age // 在action中也可以通过实例直接调用其他action // this.print(&＃39;age is be updated success&＃39;) }},getters:{ // 和vuex的getters一样&＃xff0c;返回一个值就行了。和computed一样具有缓存机制 userInfo():string{ return &＃96;name:${this.name} age:${this.age}&＃96;}},})


3.在index.ts中整合所有模块

import a from "./a"
import b from "./b"export {a,b
}


在组件中使用该状态机

pinia的api基本都在该案例中&＃xff0c;注释和代码都很容易理解&＃xff0c;相信小伙伴们都看的懂。如果不是很明白&＃xff0c;可以看下一章节的api讲解&＃xff0c;看懂的可以跳过api讲解章节。

<script setup lang&＃61;&＃39;ts&＃39;>
// 引入pinia模块
import {a as useA ,b as useB} from "./store"
import {storeToRefs} from "pinia" // 模块是一个函数&＃xff0c;函数的返回值是模块的实例
const storeA&＃61;useA()
const storeB&＃61;useB()/* 通过$patch直接修改store状态&＃xff0c;$patch方法接收一个函数&＃xff0c;函数的参数是该模块的状态
在这个函数中我们可以直接修改store状态*/
const addx&＃61;()&＃61;>{storeA.$patch((s)&＃61;>{s.x&＃43;&＃43;})}
const addy&＃61;()&＃61;>{storeA.$patch((s)&＃61;>{s.y&＃43;&＃43;})}
// 如果要解构使用状态需要使用该api进行转换&＃xff0c;否则不具备响应式
const {x,y}&＃61;storeToRefs(useA())// 通过action间接修改store状态
const setAge&＃61;()&＃61;>{// 异步action返回promise。原理也很简单&＃xff0c;async函数的返回值是promisestoreB.setAge(20).then(()&＃61;>{console.log(&＃39;age is be updated success&＃39;)})
}// 通过 $subscribe监听状态的变更
storeB.$subscribe((c,s)&＃61;>{ // state变化时回调。有变化信息和状态两个参数
// console.log(c)
// console.log(s)
},{detached:false, // 在组件卸载时是否继续监听deep:true, // 是否深度监听flush:&＃39;post&＃39;, // post:组件更新后执行&＃xff1b;sync:始终同步触发&＃xff1b;pre:组件更新前执行
})// 通过$onAction监听action的调用
storeB.$onAction((c)&＃61;>{ // 当调用action时回调// console.log(c)// c.after(()&＃61;>{console.log(&＃39;after caller&＃39;)}) //after的回调在该函数中最后执行// console.log(&＃39;action&＃39;)
},false) // 为true时&＃xff0c;组件卸载时也监听该行为// 通过$reset重置对应模块的状态
const reSetAge&＃61;()&＃61;>{ storeB.$reset()
}script><template><h3>模块ah3><p>({{storeA.x}},{{storeA.y}})p><button &＃64;click&＃61;"addx">x&＃43;&＃43;button><button &＃64;click&＃61;"addy">y&＃43;&＃43;button><h3>模块bh3><p>用户信息&＃xff1a;{{storeB.userInfo}}p><button &＃64;click&＃61;"setAge">setAgebutton><button &＃64;click&＃61;"reSetAge">reSetAgebutton>template>


运行结果:

pinia模块实例中的api讲解

1.获取模块实例

// 引入模块
import {a as useA ,b as useB} from "./store" // 模块是一个函数&＃xff0c;函数的返回值是模块的实例
const storeA&＃61;useA()
const storeB&＃61;useB()


2.提供实例修改对应模块的状态
i&＃xff1a;直接修改

/* 通过$patch直接修改store状态&＃xff0c;$patch方法接收一个函数&＃xff0c;函数的参数是该模块的状态
在这个函数中我们可以直接修改store状态*/
const addx&＃61;()&＃61;>{storeA.$patch((s)&＃61;>{s.x&＃43;&＃43;})}
const addy&＃61;()&＃61;>{storeA.$patch((s)&＃61;>{s.y&＃43;&＃43;})}


ii&＃xff1a;间接修改

// 通过action间接修改store状态
const setAge&＃61;()&＃61;>{
// 异步action返回promise。原理也很简单&＃xff0c;async函数的返回值是promise
storeB.setAge(20).then(()&＃61;>{console.log(&＃39;age is be updated success&＃39;)})
}


3.状态的解构使用

import {storeToRefs} from "pinia"
// 如果要解构使用状态需要使用该api进行转换&＃xff0c;否则不具备响应式
const {x,y}&＃61;storeToRefs(useA())


4.监听状态的变更

// 通过 $subscribe监听状态的变更
storeB.$subscribe((c,s)&＃61;>{ // state变化时回调。有变化信息和状态两个参数
// console.log(c)
// console.log(s)
},{
detached:false, // 在组件卸载时是否继续监听
deep:true, // 是否深度监听
flush:&＃39;post&＃39;, // post:组件更新后执行 ,sync:始终同步触发 ,pre:组件更新前执行
})


5.监听action的触发

// 通过$onAction监听action的调用
storeB.$onAction((c)&＃61;>{ // 当调用action时回调// console.log(c)// c.after(()&＃61;>{console.log(&＃39;after caller&＃39;)}) //after的回调在该函数中最后执行// console.log(&＃39;action&＃39;)
},false) // 为true时&＃xff0c;组件卸载时也监听该行为


6.重置状态

// 通过$reset重置对应模块的状态
const reSetAge&＃61;()&＃61;>{ storeB.$reset()
}


7.注册插件

import {createPinia} from &＃39;pinia&＃39;
// plugin是一个函数
createPinia().use(Plugin)


状态持久化

这里需要使用到注册插件的功能。首先在src/plugins/pinia/persistence.ts中编写如下代码

import {PiniaPluginContext} from &＃39;pinia&＃39;
import {toRaw } from &＃39;vue&＃39; // 封装pinia持久化插件。执行时机&＃xff1a;store初始化时&＃xff0c;执行次数是模块的次数
export default function(type:&＃39;localStorage&＃39; | &＃39;sessionStorage&＃39;){return (ctx:PiniaPluginContext)&＃61;>{// console.log(ctx)// const {app,options,pinia,store}&＃61;ctx/*app:vue应用 &＃xff1b;options&＃xff1a;导出pinia模块的选项pinia&＃xff1a;pinia app &＃xff1b; store&＃xff1a;pinia的store实例*/const store&＃61; ctx.store // 每次执行时的store是关于那个模块的storeconst storeWay&＃61;type&＃61;&＃61;&＃61;&＃39;localStorage&＃39;?localStorage:sessionStorage// console.log(store)store.$subscribe(()&＃61;>{ // console.log(toRaw(store.$state))storeWay.setItem(&＃39;pinia_&＃39;&＃43;store.$id,JSON.stringify(toRaw(store.$state)))},{deep:true})// return的值为store初始状态。pinia处理过了&＃xff0c;如果为retrun为null使用模块的初始值&＃xff0c;return JSON.parse(storeWay.getItem(&＃39;pinia_&＃39;&＃43;store.$id) as any)}
}


然后在mian.js编写如下代码即可。此时刷新浏览器刷新时&＃xff0c;状态是可以保持的&＃xff0c;不会被重置。

import { createApp} from &＃39;vue&＃39;
import App from &＃39;./App.vue&＃39;
import {createPinia} from &＃39;pinia&＃39;
// import {PiniaVuePlugin} from &＃39;pinia&＃39; // vue2
import persistence from "./plugins/pinia/persistence"const app&＃61;createApp(App)// app.use(createPinia().use(persistence(&＃39;sessionStorage&＃39;))) //sessionStorage方式持久化
app.use(createPinia().use(persistence(&＃39;localStorage&＃39;))) //localStorage方式持久化app.mount(&＃39;#app&＃39;)