Pinia快速入门-入门指南

什么是Pinia？Pinia是Vue的存储库，允许您跨组件/页面共享状态。Pinia最初是为了探索下一个版本的Vuex而推出的产品，它融合了Vuex5核心团队的许多想法。最终，我们意识到Pinia已经实现了我们想在Vuex5中交付的大部分内容，并决定将其作为我们的官方新推荐。Pinia特点足够轻巧，Pinia重约1kb，您甚至会忘记它的存在！RemoveMutation，Actions支持同步和异步（Actions是最好的两个，写起来简单）；无需手动注册Store，Store仅在需要时自动注册。如果您从不使用它，您将永远不会“注册”（不用担心）；没有模块嵌套，只有Store的概念，并且Stores可以自由使用，更好的代码分割；Vue2和Vue3都支持；支持大型项目迁移时，Pinia和Vuex混合使用（亲密迁移）；更完善的打字稿支持；对接Vuedevtools，Vue2、Vue3开发体验更佳；支持插件扩展功能；支持模块热更新，无需加载页面即可修改容器，可保持任何现有状态；支持服务端渲染；其中Vuex被Vuex使用，Pinia目前处于维护模式。它仍然有效，但没有添加新功能。对于新的应用项目，推荐使用Pinia。Pinia已经实现了我们想在Vuex5中提供的大部分功能，所以决定将其作为新的官方推荐（注意：网站的旧版本没有更新）如何使用Pinia1.安装npminstallpiniavue2需要额外安装npmipinia@vue/composition-api--save2.定义Store新建src/stores目录，并在其下创建index.tsPinia目录。它通常被称为商店而不是商店。这是为了强调Pinia使用多个store而不是Vuex在迁移过程中Pinia和Vuex也使用单个store。//src/stores/index.ts//引入Store定义函数import{defineStore}from'pinia'//定义Store实例并导出，useStore可以是任何东西，比如useUser,useCart//第一个参数是唯一不能Repeat的，string类型，作为区分仓库的仓库ID//第二个参数以对象的形式配置仓库的state,getters,actionsexportconstuseStore=defineStore('main',{//state推荐箭头函数，对于TS类型Inferredstate:()=>{return{name:'张三',counter:0}},getters:{},actions:{}})在main.ts中引入并挂载到根实例//src/main.tsimport{createApp}from'vue'importAppfrom'./App.vue'import{createPinia}from'pinia'//创建一个Vue应用程序实例//实例化Pinia//挂载Pinia实例作为插件示例代码如下：//main.jsimport//importpiniaimport{createPinia,PiniaVuePlugin}from'pinia'Vue.use(PiniaVuePlugin)constpinia=createPinia()//需要在实例上挂载newVue({router,pinia,render:h=>h(App)}).$mount('#app')如果vue2中报如下错误，需要在vue.config.js中添加如下配置：3.State1，访问State2.修改State1，对单个参数修改statestore.counter++2，对多个参数修改statestore.$patch({counter:store.counter+1,name:'Abalam',})，对all修改statestore.$state={counter:666,name:'Paimon'}orpinia.state.value={}3.ResetState将状态重置为初始值conststore=useStore()store.$reset()4.Vue2import{mapState}from'pinia'import{useCounterStore}from'../stores/counterStore'exportdefault{computed:{...mapState(useCounterStore,['counter'])//or...mapState(useCounterStore,{myOwnName:'counter',double:store=>store.counter*2,magicValue(store){returnstore.someGetter+this.counter+this.double},}),},}四、Gettersgetter中的值具有缓存特性，类似于computed，如果值不发生变化，只会被调用如果多次使用一次1.defineGettersexportconstuseStore=defineStore('main',{state:()=>({counter:0,}),getters:{doubleCount:(state)=>state.counter*2,//自动推导ReturntypedoubleCount(state){returnstate.counter*2},//依赖getter返回参数，需要显式设置返回类型doublePlusOne():number{returnthis.doubleCount+1},},})2,使用Getters3、vue2写法import{mapState}来自'pinia'import{useCounterStore}from'../stores/counterStore'exportdefault{computed:{...mapState(useCounterStore,['doubleCount'])//or...mapState(useCounterStore,{myOwnName:'doubleCounter',double:store=>store.doubleCount,}),},}5.ActionsPinia中删除了Mutation，Actions支持同步和异步1.DefineActions//synchronousexportconstuseStore=defineStore('main',{state:()=>({counter:0,userData:null,}),actions:{increment(){this.counter++},randomizeCounter(){this.counter=Math.round(100*Math.random())},},})//异步导入{mande}from'mande'constapi=mande('/api/users')exportconstuseUsers=defineStore('users',{state:()=>({userData:null,}),actions:{asyncregisterUser(login,password){this.userData=awaitapi.post({login,password})},},})2.调用Actions1，任何可以直接调用store的方法2、action之间的相互调用，可以直接用this访问exportconstuseUserStore=defineStore({'user',actions:{increment(){this.counter++},increase(){//调用另一个action的方法this.increment()},}})3.在一个action中调用其他store的action比较简单。引入对应的store后，就可以访问它的内部方法了。import{useAuthStore}from'./auth-store'exportconstuseSettingsStore=defineStore('settings',{state:()=>({preferences:null,}),actions:{asyncfetchUserPreferences(){//调用auth-storestoreconstauth=useAuthStore()if(auth.isAuthenticated){this.preferences=awaitfetchPreferences()}else{thrownewError('Usermustbeauthenticated')}},},})3中的操作方法,vue2写作import{mapActions}from'pinia'import{useCounterStore}from'../stores/counterStore'exportdefault{methods:{...mapActions(useCounterStore,['increment'])//or...mapActions(useCounterStore,{myOwnName:'doubleCounter'}),},}总结总的来说，Pinia是Vuex的官方替代版本，可以更好地支持Vue2、Vue3和TypeScript。在Vuex的基础上，去掉了Mutation、模块嵌套等概念，语法更简洁直接，更符合Vue3的Compositionapi，为TypeScript提供更好的类型推导。以上就是Pinia.js的一些使用介绍。Pinia.js的内容远不止于此，更多的内容和用法等待大家去探索。Pinia文档参考文章Vue3新版中文文档Pinia文档新一代状态管理工具，Pinia.js入门指南大菠萝？Pinia来了，不学你就出pinia快速入门（一）