最简单的学习Vuex，你学会了吗？

1.基础Vuex是专门为Vue.js应用开发的状态管理模型。它使用集中存储来管理应用所有组件的状态，并使用相应的规则保证状态以可预测的方式变化，而每一个Vuex应用的核心就是store（仓库）。为了使用Vuex，首先需要安装包，执行以下命令完成安装过程。npminstallvuex@next--save2.核心概念Vuex中有五个核心概念：State、Getters、Mutations、Actions和Modules。每个部分都有自己的功能。让我们看一个简单的代码。代码涉及到这些核心概念，然后在代码的基础上进一步理解。//index.js文件import{createStore}from"vuex";import{moduleA}from"./module/moduleA";exportconststore=createStore({//Vuex允许把store分成模块，每个模块都有他们自己的状态、突变、动作、getter，甚至嵌套的子模块//访问模块A的状态：store.state.moduleAmodules:{moduleA}});//module/moduleA.js文件//对于modules内部的mutation和getter，接收到的第一个参数是模块的局部状态对象//对于模块内部的action，局部状态通过context.state暴露出来，并且根节点的状态是context.rootState//对于模块内部的getter，根节点状态会作为第三个参数暴露出来//在有命名空间的模块中访问全局内容//如果要使用全局状态而getter，rootState和rootGetters会作为第三个和第四个参数getter传入，Action也会通过context对象的属性传入//如果需要在全局命名空间分发action或者提交mutation，传入{root:true}作为要分派或提交的第三个参数。exportconstmoduleA={//默认情况下，模块内的动作、突变和getter都注册在全局命名空间中。如果想让模块有更高的封装性和复用性，可以加上namespaced:true使之成为一个带有命名空间的模块namespaced:true,state:{testState1:'xxxx',testState2:{a:0,b:1},testState3:0},//有时候需要从store中的state中导出一些状态，这时候可以把这部分抽象成一个函数来多次使用。//Vuex允许在store中定义getter。和计算属性一样，getter的返回值会根据其依赖关系缓存起来，只有当其依赖关系的值发生变化时才会重新计算。getters:{//getter接收状态作为它的第一个参数testGetter1:state=>{returnstate.testState1+state.testState3;},//getter可以接受其他getter作为第二个参数testGetter2:(state,getters)=>{returngetters.testGetter1.length;}},//在Vuexstore中改变状态的唯一方法是提交一个突变，每个突变都有一个字符串事件类型和一个接收状态作为第一个参数的回调函数，作为第二个参数提交//调用对应类型的store.commit方法触发对应的回调函数//Mutation必须是同步函数mutations:{testMutation1(state){//改变状态state.testState3++;},//第二个参数为payloadtestMutation2(state,payload){state.testState1+=payload.content;}},//Action提交变异而不是直接改变状态//Action可以包含任何异步操作//Action函数接受一个context对象，其方法和属性与store实例相同，因此可以调用context.commit来提交一个mutation，或者通过context.state和context.getters获取state和getters。//Action通过store.dispatch方法触发动作：{testAction1(context){setTimeout(()=>{context.commit('testMutation1');},1000);},testAction2({commit},payload){setTimeout(()=>{commit({type:'testMutation2',content:payload.content});},1000);}}};StateVuex使用单个状态树来存储所有数据作为唯一的数据源。上面显示的代码包含testState1、testState2和testState3。如何在组件中获取这些数据？（Vue3.x语法）Getter有时需要从存储中的状态中导出一些状态。这时候可以把这部分抽象成一个函数供多次使用。Vuex允许在store中定义getter。和计算属性一样，getter的返回值会根据其依赖关系缓存起来，只有当其依赖关系的值发生变化时才会重新计算。突变是唯一的在Vuex的store中改变状态的方法是提交mutations，每个mutation都有一个字符串事件类型和一个回调函数，回调函数接收状态作为第一个参数，提交的payload作为第二个参数。(注：Mutation必须是同步函数)ActionsActions类似于mutations，但还是有一些区别。一方面，他们提交突变而不是直接改变状态；另一方面，Action可以包含任何异步操作。Modules使用单个状态树，应用的所有状态会集中到一个更大的对象中，当应用变得复杂时，store将变得难以维护。为了解决这个问题，Vuex允许将store分成模块。每个模块都有自己的状态、突变、动作、吸气剂，甚至嵌套的子模块。具体用法见第二节开头的代码，里面有它的常用用法。3.插件3.1插件基础Vuex在实例化商店时可以接受插件选项。该选项可以添加一系列插件。插件可以帮助我们完成一系列的工作，节省人力物力。接下来，我们自定义一个简单的插件并调用该插件。//plugins/myPlugin.js//插件接收唯一参数storeconstmyPlugin=store=>{//store上有一系列的方法，可以在pluginshttps://next.vuex.vuejs中使用。org/zh/api/#commit//用registerModule注册一个动态模块//用replaceState替换store的根状态//监听mutation的变化，每次mutation完成后都会调用这个处理函数，并接收突变和突变后的状态作为参数存储myPluginfrom"./plugins/myPlugin";exportconststore=createStore({//...//一个数组，包含应用在store上的插件方法，这些插件直接接收store作为唯一参数,并且可以监听突变或者提交突变插件:[myPlugin]});3.2数据持久化插件Vuex的状态存储不能持久化。只要刷新页面，数据就会丢失。这时候可以引入vuex-persist插件来解决这个问题，它将状态保存到cookie或者localStorage中。import{createStore}from"vuex";importVuexPersistencefrom"vuex-persist";importmyPluginfrom"./plugins/myPlugin";//使用这个插件实现store数据的持久化constvuexLocal=newVuexPersistence({storage:window.localStorage});exportconststore=createStore({//...//一个包含应用于store的插件方法的数组，这些插件直接接收store作为唯一参数，可以监听mutation或者提交突变插件：[myPlugin,vuexLocal.plugin]});本文转载自微信公众号“前端点线面”，可通过以下二维码关注。转载本文请联系前端点线面公众号。