Vuex4攻略，Vue3需要看看！

作者：AnthonyGore译者：前端小智来源：vuejsdevelopers有梦想，有干货，微信搜索【大千世界】关注这位凌晨还在洗碗的洗碗智慧。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，里面有完整的测试站点、资料和我的一线厂商访谈系列文章。Vuex是Vue.js生态系统中必不可少的工具。但是，刚接触Vuex的开发人员可能会被“状态管理模式”等术语推迟，并且对他们实际需要Vuex的目的感到困惑。这篇文章是对Vuex的介绍，当然也会涵盖Vuex的高级概念，并向您展示如何在您的应用程序中使用Vuex。Vuex解决的问题要了解Vuex，首先要了解它解决的问题。假设我们开发一个多用户聊天应用程序。该界面有一个用户列表、一个私人聊天窗口、一个带有聊天记录的收件箱，以及一个通知栏，用于通知用户当前未查看的来自其他用户的未读消息。每天有数百万用户通过我们的应用程序与数百万其他用户聊天。然而，有人抱怨一个恼人的问题：通知栏偶尔会发出错误的通知。用户会收到一条新的未读消息的通知，但当他们查看时，它只是一条已经看过的消息。作者描述的是几年前Facebook开发人员在他们的聊天系统中面临的真实情况。为了解决这个问题，开发人员创建了一个名为“Flux”的应用程序架构。Flux构成了Vuex、Redux和其他类似库的基础。一段时间以来，FluxFacebook的开发人员一直在努力解决“僵尸通知”问题。他们最终意识到它的持久性不仅仅是一个简单的缺陷——它指出了应用程序架构中的一些潜在缺陷。这个缺陷最容易抽象地理解：当应用程序中有多个共享数据的组件时，它们互连的复杂性会增加到无法预测或理解数据状态的程度。因此，应用程序无法扩展或维护。Flux是一种模式，而不是一个库。我们不能去Github下载Flux。是一种类似于MVC的设计模式。Vuex和Redux等库实现Flux模式的方式与其他框架实现MVC模式的方式相同。实际上，Vuex并没有实现Flux的全部，而只是其中的一个子集。不过现在不要担心，让我们专注于理解它遵循的关键原则。原则1：单源组件可能具有它们只需要了解的本地数据。例如，用户列表组件中滚动条的位置可能与其他组件无关。但是，任何要在组件之间共享的数据（即应用程序数据）都必须保存在单独的位置，与使用它的组件分开。这个单一位置称为“商店”。组件必须从这个位置读取应用程序数据，不能保留自己的副本以防止冲突或分歧。import{createStore}from"vuex";//实例化我们的Vuexstoreconststore=createStore({//"State"组件的应用数据state(){return{myValue:0};}});//从其Computed属性访问状态的组件constMyComponent={template:"

",computed:{myValue(){returnstore.state.myValue;}}};原则2：DataisonlyRead组件可以自由的从store中读取数据。但是存储中的数据不能更改，至少不能直接更改。相反，他们必须通知商店更改数据的意图，并且商店负责通过一组定义的称为突变的函数进行更改。为什么采用这种方法？如果我们把数据变化逻辑集中起来，那么在状态不一致的情况下，我们只需要在同一个地方检查，而不用去每个特定的文件。我们将某些随机组件（可能在第三方模块中）以意想不到的方式更改数据的可能性降至最低。conststore=createStore({state(){return{myValue:0};},mutations:{increment(state,value){state.myValue+=value;}}});//需要更新值吗？//错了，不要直接改变storevaluestore.myValue+=10;//正确，调用正确的突变。store.commit('增量',10);原则3：突变是同步的如果应用程序在其体系结构中实现了上述两个原则，则调试数据不一致会容易得多。可以记录提交并观察状态如何变化（使用VueDevtools时确实可以做到这一点）。但是如果我们的mutation是异步调用的，这个能力就会被削弱。我们知道提交的顺序，但我们不知道组件提交它们的顺序。同步突变确保状态不依赖于不可预测事件的顺序和时间。很酷，那么Vuex到底是什么？有了所有这些背景知识，我们终于可以解决这个问题了——Vuex是一个帮助我们在Vue应用程序中实现Flux架构的库。通过执行上述原则，Vuex使我们的应用程序数据保持透明和可预测的状态，即使数据在多个组件之间共享也是如此。现在我们对Vuex有了一个高层次的了解，让我们看看如何在实际项目中创建基于Vuex的应用程序。制作Vuex待办事项列表为了演示Vuex的用法，我们设置了一个简单的待办事项应用程序。您可以在此处访问代码的工作示例。示例地址：https://codesandbox.io/s/happ...如果自己电脑试试，可以使用以下命令：vuecreatevuex-exampleinstallVuexcdvuex-examplenpmi-Svuex@4npmrunserveCreate一个Vuex商店现在，要创建Vuex商店，请在项目中创建src/store/index.js：mkdirsrc/storetouchsrc/store/index.js打开文件并导入createStore方法。此方法用于定义商店及其属性。现在，我们导出商店，以便我们可以在Vue应用程序中访问它。//src/store/index.jsimport{createStore}来自“vuex”；导出默认createStore({});将商店添加到Vue实例为了从任何组件访问Vuex商店，我们需要在主文件中导入商店模块，并将商店作为插件安装在主Vue实例上//src/main.jsimport{createApp}from"vue";从“@/App”导入应用程序；从“@/store”导入商店；constapp=createApp(App);app.use(store);app.mount("#app");创建一个简单的应用程序如上所述，Vuex的重点是创建可扩展的全局状态，通常在较大的应用程序中。但是，我们可以在一个简单的待办事项应用程序中演示其功能。完成后的效果如下：现在，删除HelloWorld文件：rmsrc/components/HelloWorld.vueTodoNew.vue现在，添加一个新的组件TodoNew，它负责创建新的待办事项。触摸src/components/TodoNew.vue打开TodoNew.vue并输入以下内容：//src/components/TodoNew.vue现在转到组件定义，有两个本地状态属性-task和id，它们为新的待办事项提供了唯一标识符。//src/components/TodoNew.vue定义存储状态后，我们将创建一个显示待办事项的组件。由于它和TodoNew组件都需要访问相同的数据，因此这是我们保存在Vuex存储中的全局状态的理想候选者。现在，回到状态并定义属性状态。这里使用了Vux4提供的createStore函数，返回一个对象。这个对象有一个属性todos是一个空数组。//src/store/index.jsimport{createStore}来自“vuex”；exportdefaultcreateStore({state(){return{todos:[]}}});定义mutation从原理2我们可以知道Vuex的状态是不能直接改变的，需要定义一个mutator函数。现在，我们向商店添加一个突变属性，以及一个函数属性addTodo。所有增变器方法的第一个参数。第二个可选参数是store，第二个是传递的数据。//src/store/index.jsimport{createStore}from"vuex";exportdefaultcreateStore({state(){return{todos:[]}},mutations:{addTodo(state,item){state.todos.unshift（物品）;}}}）;使用commit调用突变现在，您可以在TodoNew组件中使用它，并在TodoNew组件中定义一个addTodo方法。要访问商店，我们可以使用全局属性this.$store。使用commit方法创建一个新的突变。需要传递两个参数——首先是变异的名称，其次是我们要传递的对象，这是一个新的待办事项（由id和任务值组成）。//src/components/TodoNew.vuemethods:{addTodo:function(){const{id,task}=this;this.$store.commit("addTodo",{id,task});这个.id++;这。任务=“”；}}回顾到此为止：用户通过输入框输入待办事项，并绑定到task变量。提交表单后，调用addTodo方法创建一个todo对象并将其“提交”到商店。//src/components/TodoNew.vue读取商店数据现在，我们已经创建了一个用于添加功能的待办事项。下一步是显示它们。新建组件TodoList.vue文件。touchsrc/components/TodoList.vue内容如下：//src/components/TodoList.vuetodos是一个计算属性，我们在其中返回Vuex存储的内容。//src/components/TodoList.vue定义getter不同于直接访问存储内容。Getter类似于存储的计算属性函数。这些工具非常适合在将数据返回到应用程序之前过滤或转换数据。例如，下面有返回未过滤状态的getTodos。在许多情况下，可以使用过滤器或地图来转换此内容。todoCount返回待办事项数组的长度。Getters通过确保组件愿意保留数据的本地副本，帮助实现原则1，即单一事实来源。//src/store/index.jsexportdefaultcreateStore({...getters:{getTodos(state){returnstate.todos;},todoCount(state){returnstate.todos.length;}}})返回TodoListcomponent，我们通过返回this.$store.getters.getTodos来完成功能。//src/components/TodoList.vueApp.vue要完成这个应用程序，现在我们所要做的就是在App.vue中导入和声明我们的组件。//src/App.vue你真的需要Vuex吗？显然，在大型应用程序中，拥有一个全局状态管理解决方案将有助于使我们的应用程序具有可预测性和可维护性。但是对于比较小的项目，有时候觉得用Vuex用处太大，大家还是按照实际需求来比较合理。Vuex的优点：易于管理全局状态，强大的全局状态调试Vuex的缺点：额外的项目依赖繁琐的模板原文：https://vuejsdevelopers.com/2...即时的。之后为了解决这些bug，花费了大量的时间在日志调试上。顺便在这里推荐一个不错的BUG监控工具Fundebug。交流有梦想，有干货，微信搜索【大千世界】关注这位凌晨还在洗碗的洗碗智者。本文GitHubhttps://github.com/qq44924588...已收录，有完整的测试站点、资料和我的一线厂商访谈系列文章。