新一代状态管理工具，Pinia.js入门指南

本文为转载作者：小学生学习链接：https://juejin.cn/post/704919...前言Pinia.js是一个新一代状态管理器，由Vue.js团队成员开发，也被认为是下一代Vuex，即Vuex5.x，也强烈推荐在Vue3.0项目中使用。Pinia.js具有以下特点：完整的打字稿支持；够轻，压缩后体积只有1.6kb；移除突变，仅移除状态、吸气剂、动作（这是我最喜欢的功能之一）；actions支持同步和异步；没有模块嵌套，只有store的概念，store可以自由使用，更好的代码分割；无需手动添加店铺，店铺创建后自动添加；安装npminstallpinia--save复制代码创建Store并新建src/store目录并在其下创建index.ts,exportstore//src/store/index.tsimport{createPinia}from'pinia'conststore=createPinia()exportdefaultstorecopycodetoimportanduseinmain.ts.//src/main.tsimport{createApp}from'vue'importAppfrom'./App.vue'importstorefrom'./store'constapp=createApp(App)app.use(store)CopycodeStateDefinitionState创建用户.tsundersrc/store//src/store/user.tsimport{defineStore}from'pinia'exportconstuseUserStore=defineStore({id:'user',state:()=>{return{name:'张三'}}})复制代码获取状态复制代码也可以结合computed得到。constname=computed(()=>userStore.name)Copycodestate也可以使用解构，但是使用解构会导致无响应。这时候可以使用pinia的storeToRefs。import{storeToRefs}from'pinia'const{name}=storeToRefs(userStore)复制代码修改state可以直接修改state如下userStore.name='Lisi'复制代码但一般不建议这样做，建议通过actions修改状态，可以通过this直接访问action。exportconstuseUserStore=defineStore({id:'user',state:()=>{return{name:'张三'}},actions(){updateName(name){this.name=name}}})Copy代码复制代码GettersexportconstuseUserStore=defineStore({id:'user',state:()=>{return{name:'张三'}},getters:{fullName:(state)=>{returnstate.name+'Feng'}}})复制代码userStore.fullName//张三丰复制代码ActionsAsynchronousactionAction可以像写一个简单的函数一样支持async/await语法，让你愉快应对异步处理场景。exportconstuseUserStore=defineStore({id:'user',actions(){asynclogin(account,pwd){const{data}=awaitapi.login(account,pwd)returndata}}})复制代码互操作的调用动作之间的相互调用可以直接用这个访问。exportconstuseUserStore=defineStore({id:'user',actions(){asynclogin(account,pwd){const{data}=awaitapi.login(account,pwd)this.setData(data)//调用另一个methodofactionreturndata},setData(data){console.log(data)}}})复制代码，在action中调用其他store中的action也比较简单。引入对应的store后，就可以使用其action的方法了。//src/store/user.tsimport{useAppStore}from'./app'exportconstuseUserStore=defineStore({id:'user',actions(){asynclogin(account,pwd){const{data}=awaitapi.login(account,pwd)constappStore=useAppStore()appStore.setData(data)//在appstore中调用action方法返回数据}}})Copycode//src/store/app.tsexportconstuseAppStore=defineStore({id:'app',actions(){setData(data){console.log(data)}}})复制代码数据持久化插件p??inia-plugin-persist可以辅助实现数据持久化功能。安装npmipinia-plugin-persist--savecopycodeuse//src/store/index.tsimport{createPinia}from'pinia'importpiniaPluginPersistfrom'pinia-plugin-persist'conststore=createPinia()store.use(piniaPluginPersist)exportdefaultstore复制代码，然后在相应的store中启用persist。exportconstuseUserStore=defineStore({id:'user',state:()=>{return{name:'张三'}},//启用数据缓存persist:{enabled:true}})复制代码数据存在默认sessionStorage，商店的id将用作键。自定义key也可以在strategies中自定义key值，将存储位置由sessionStorage改为localStorage。persist:{enabled:true,strategies:[{key:'my_user',storage:localStorage,}]}复制代码持久化部分state默认会缓存所有状态，可以通过路径指定需要持久化的字段，其他的会不被坚持。state:()=>{return{name:'张三',age:18,gender:'男'}},persist:{enabled:true,strategies:[{storage:localStorage,paths:['name','age']}]}复制代码上面我们只持久化name和age，改成localStorage，性别不会持久化。如果它的状态被发送到change，当页面刷新时它就会丢失，回到初始状态，而name和age则不会。感谢您的分享。这是这件事的结束。感谢您阅读。如果这篇文章对你有帮助，别忘了点个赞??。本文如有错误或不足之处，欢迎在评论区指正！结语我是林三鑫，一个狂热的前端菜鸟程序员。如果你有上进心，喜欢前端，想学前端，那我们可以交个朋友，一起钓鱼哈哈，摸摸鱼群，加我，请注意[思想]