Vue状态管理的未来

有新系列：Vue2和Vue3技能小册子微信搜索【大招走向世界】，第一时间与大家分享前端行业动态、学习方法等.本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，里面有完整的测试站点、资料和我的一线厂商访谈系列文章。随着Vue3获得关注并成为默认设置，许多事情都在发生变化，生态系统也在改善。直到最近，Vue3中状态管理的默认推荐是使用Pinia。在本课中，我们将根据项目的大小探索不同的状态管理方法，并尝试预测Vue中状态管理的未来可能是什么样子。响应式API在选项API中，我们可以使用data()选项为组件声明响应式数据。在内部，返回的对象被包装在一个响应式助手中。此助手也可作为公共API使用。如果是多个数据被多个实例共享的状态，可以使用reactive()创建一个反应对象，然后从多个组件中导入。import{reactive}from"vue";exportconststore={state:reactive({heroes:['Aragorn','Legolas','Gimli','Gandalf']}),addHero(hero){this.state.英雄.push(英雄);}};使用这种方法，数据是集中的并且可以跨组件重用。对于小型应用程序来说，这可能是占用空间最小的简单选择。组合组合API带来的一个类似概念是使用组合。这种模式在React中非常流行。结合Vue强大的响应机制，你可以写出一些优雅的、可重用的组合，比如：import{ref,computed}from"vue";从“../api”导入fakeApiCall；导出默认函数useFellowship(){constheroes=ref([]);常量加载=参考（假）；异步函数init(){loading.value=true;heroes.value=awaitfakeApiCall();loading.value=false;}return{heroes:computed(()=>heroes.value),loading:computed(()=>loading.value),init};}然后，可以这样使用：示例地址：https://codesandbox.io/s/comp...这种模式最初是为了替代mixins而引入的，因为现在组合比继承更受欢迎但是它也可以用来共享组件之间的状态。这也是许多替代Vuex的库背后的主要思想。Vuex4Vuex不会消失。它支持Vue3，具有相同的API和最小的中断更改（这可能是其他库应该处理的事情）。唯一的变化是安装必须发生在Vue实例上，而不是直接发生在Vue原型上。从'vue'导入{createApp}从'./store'导入{store}从'./App.vue'导入应用程序constapp=createApp(App)app.use(store)app.mount('#app')Vuex4仍在维护中。但是，不会向其添加很多新功能。如果您已经有一个使用Vuex3的项目并且想延迟迁移到其他项目，这是一个不错的选择。PiniaPinia最初是一个实验，但很快成为Vue3的主要选择。它提供了比Vuex更多的API，具有更好的架构和更直观的语法，并充分利用了组合API。在开发工具的支持上（状态检查、timelinewithaction和timetravelability），以及Vuex使用插件提供的扩展性，pinia被设计成类型安全和模块化，这是使用Vuex时最大的两个痛点点。另外，定义story的语法和Vuex模块非常相似，使得迁移工作量非常小，而且在使用store时，使用的API接近于Vue3使用compositionAPI的方式。import{defineStore}from'pinia'exportconstuseFellowship=defineStore('fellowship',{state:()=>{return{heroes:['Aragorn','Legolas','Gimli','Gandalf']}},动作：{addHero(hero){this.heroes.push(hero)},},})正如您可能已经注意到的，最大的区别是突变完全消失了。它们通常被认为非常冗长，使用它们并没有真正的好处。此外，不再需要名称空间。通过导入商店的新方式，所有内容都已命名空间。这意味着，在Pinia中，您拥有多个可根据需要导入和使用的商店，而不是拥有多个模块的商店。Pinia设置StorePinia支持另一种定义商店的语法。它接受一个定义反应式属性和方法的函数，并返回它们，这与VueCompositionAPI的设置函数非常相似。import{defineStore}from'pinia'exportconstuseFellowship=defineStore('fellowship',()=>{constheroes=ref([]);functionaddHero(hero){heroes.value.push(hero)}return{heroes,addHero};})在SetupStores中：ref()变成stateattributecomputed()变成gettersfunction()变成actionsSetupstores比OptionsStore带来更多的灵活性，因为watchers可以在store中创建并自由使用任何可组合项。一个更实际的例子是创建一个可以保存英雄列表并添加和删除相应元素的联谊会商店：:[],filter:'all',//类型会自动推断为数字id:1}),getters:{aliveHeroes(state){returnstate.heroes.filter((hero)=>hero.isAlive)},deadHeroes(state){returnstate.heroes.filter((hero)=>!hero.isAlive)},filteredHeroes(){switch(this.filter){case'alive':returnthis.aliveHeroescase'dead':returnthis.deadHeroesdefault:returnthis.heroes}}},actions:{addHero(name){if(!name)return//直接改变状态！this.heroes.push({name,id:this.id++,isAlive:true})},killHero(name){this.heroes=this.heroes.map((hero)=>{if(hero.name===name){hero.isAlive=false}returnhero})},setActiveFilter(filter){this.filter=filter}}})如果你熟悉Vuex，应该不难理解这段代码首先，每个state需要一个namespacekey.在这里，我们使用团契。state是一个函数，保存store的所有响应数据，getter访问store中的数据。state和getters都和Vuex一样。但是对于动作来说，它与Vuex有很大的不同。context参数没有了，actions可以直接通过this访问state和getters。你可能已经注意到，动作直接操作状态，这在Vuex中是被严格禁止的。最后，突变被完全移除，因为状态操作现在在动作中执行。使用piniastore很简单:你的团契是空的