Pinia快速入门

什么是皮尼亚？Pinia是Vue的状态管理库。与Vuex类似，是Vue的另一种状态管理方案。Pinia支持Vue2和Vue3。本文只讲Pinia在Vue3的使用，Vue2的使用略有不同。参考官方文档Pinia的优点是直观易学极轻，只有1KB模块化设计，分体状态下安装方便Pinia安装需要@next由于Pinia2处于beta阶段，Pinia2是对应的版本Vue3#使用npmnpminstallpinia@next#使用yarnyarnaddpinia@next创建一个pinia（根存储）并将其传递给应用程序：import{createPinia}from'pinia';app.use(createPinia());核心概念与StoreStore的基本使用相同保存状态和业务逻辑的实体可以自由读写，可以在setup中使用importing//store.jsimport{defineStore}from"pinia后创建store";//调用defineStore后返回一个函数，调用该函数获取Store实体exportconstuseStore=defineStore({//id:必填，在所有Stores中唯一id:"myGlobalState",//state:返回的函数状态对象:()=>({count:1}),});UseStore//xxx.vueGettersPinia中的Getters与Vuex中的Getters功能相同，但略有不同。Pinia中的Getters是直接从Store中读取的，类似于Store.xx，就像Generalpropertyreading和Getter一样。基本上，使用Getter。第一个参数是state，即当前状态。您还可以使用this.xx来获取状态。您还可以访问Getter中的其他Getters，或其他Store示例：//modifystore.jsimport{defineStore}from"pinia";import{useOtherStore}from"@/store/otherStore.js";exportconstuseStore=defineStore({id:"myGlobalState",state:()=>({count:2}),getters:{//一个基本的Getter：计算计数的平方//使用参数countPow2(state){returnstate.count**2;},//使用this/*countPow2(){returnthis.count**2;},*///简单的Getters直接使用箭头函数//countPow2:state=>state.count**2//获取otherGetters直接通过thiscountPow2Getter(){returnthis.countPow2;}//使用otherStoreotherStoreCount(state){//这里是其他Stores，调用获取Store，就像setupconstotherStore=useOtherStore();返回otherStore.count；},}});//otherStore.jsimport{defineStore}from"pinia";exportconstuseOtherStore=defineStore({id:"otherState",state:()=>({count:5}),});actionsPinia没有Mutations，state在action中统一运行。虽然可以通过this.xx访问相应的state直接操作Store，但是还是建议在actions中操作，保证state不会被意外改变。Action和Actions和普通函数一样，也可以像Getters一样访问其他Stores，使用其他Stores的方法同上，这里不再赘述。详情请参考官方文档Action动作基本用法//store.jsexportconstuseStore({state:()=>({count:2,//...})//...actinos:{countPlusOne(){this.count++;},countPlus(num){this.count+=num;}}})总结Piniavs.Vuex更简单，Pinia可以自由扩展官方文档PluginsPinia是一种直观的状态管理方式，允许用户返回到模块导入导出的原始状态，使状态的来源更加可见。Pinia的使用体验和Recoil类似，但是没有那么多概念和API，主体非常精简易用（Recoil是Facebook出品的React官方状态管理库，使用ReactHooks来管理状态）Pinia2目前处于Beta状态，不建议在生产环境中使用。不过，相信在稳定下来之后，它会成为Vue生态系统中又一个主要的状态管理解决方案。