1.pinia介绍
个人网站:【紫陌】【笔记分享网】 想寻找共同学习交流、共同成长的伙伴，请点击【前端学习交流群】
pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。就是和vuex一样的实现数据共享。 依据Pinia官方文档，Pinia是2019年由vue.js官方成员重新设计的新一代状态管理器，更替Vuex4成为Vuex5。 Pinia 目前也已经是 vue 官方正式的状态库。适用于 vue2 和 vue3。可以简单的理解成 Pinia 就是 Vuex5。也就是说， Vue3 项目，建议使用Pinia。
pinia官方文档
Pinia 的优点
pinia 符合直觉，易于学习。pinia 是轻量级状态管理工具，大小只有1KB.pinia 模块化设计，方便拆分。pinia 没有 mutations，直接在 actions 中操作 state，通过 this.xxx 访问响应的状态，尽管可 以直接操作 state，但是还是推荐在 actions 中操作，保证状态不被意外的改变。store 的 action 被调度为常规的函数调用，而不是使用 dispatch 方法或者是 MapAction 辅助函数，这是在 Vuex 中很常见的。支持多个 store。支持 Vue devtools、SSR、webpack 代码拆分。
更多查看文档…
2.pinia基本使用
首先先安装依赖
npm install pinia
在main.js中引入pinia并创建容器挂载到根实例上
//引入stores暴露出的pinia的实例
import pinia from './stores'
createApp(App).use(pinia).mount('#app')
创建stores文件夹和index.js文件（这个文件以后基本不用管了）
import { createPinia } from "pinia";
const pinia = createPinia()
export default pinia
在stores文件夹下创建counter.js文件。这个文件就是存有关counter相关的数据。（类似vuex的模块化）
defineStore 是需要传参数的，
第一个参数是id，就是一个唯一的值，简单点说就可以理解成是一个命名空间.第二个参数就是一个对象，里面有三个模块需要处理，第一个是 state，第二个是 getters，第三个是 actions。
//定义关于counter的store
import {defineStore} from 'pinia'
/*defineStore 是需要传参数的，其中第一个参数是id，就是一个唯一的值，
简单点说就可以理解成是一个命名空间.
第二个参数就是一个对象，里面有三个模块需要处理，第一个是 state，
第二个是 getters，第三个是 actions。
*/
const useCounter = defineStore("counter",{
state:() => ({
count:66,
}),
getters: {
},
actions: {
}
})
//暴露这个useCounter模块
export default useCounter
注意：返回的函数统一使用useXXX作为命名方案，这是约定的规矩。例如上面的useCounter
然后再组件中使用：
注意：在模板使用 ，不用和vuex一样还要.state,直接点state里面的K
运行效果： 可以用vue3的调试工具看pinia
2.1注意Store获取到后不能解构，否则失去响应式
案例需求，点击按钮加一： 一个不解构，一个不解构看看区别。
运行结果并且看看state是什么
初始值是66，点了一次加1和点了一次加20
注意：state的结果是undefined 所以actions只能通过this访问store。getter的话state和this都能访问。
异步操作使用
在 actions 处理异步的时候呢，我们一般是与 async 和 await 连用。 counter模块： 这里大致演示，具体还看自己怎么使用。
state:() => ({
count:66,
list:[]
}),
actions:{
//大概演示这个异步流程
async axiosData(){
const res = await fetch("http://-----------------")
if(code ==200){
//收到数据保存到store
this.list = res.data.list
return "ok"
}
}
}
组件使用：
就这样可以啦！！！
是不是比vuex简洁很多。。。
6.数据的持久化
pinia支持扩展插件
我们想实现数据持久化
npm i pinia-plugin-persist
export const useUserStore = defineStore({
state () {
return {
count: 0,
num: 101,
list: [1, 2, 3, 4 ]
}
},
persist: {
enabled: true, // 开启缓存 默认会存储在本地localstorage
storage: sessionStorage, // 缓存使用方式
paths:[] // 需要缓存键
}
})
效果：
文章有写的不当的地方，欢迎指正修改。如果感觉文章实用对你有帮助，欢迎点赞收藏和关注，你的点赞关注就是我动力，大家一起学习进步。
参考文章
您阅读本篇文章共花了：
发表评论