Vuex是专门为Vue.js应用开发的状态管理模式。它使用集中存储来管理应用程序所有组件的状态，并使用相应的规则来确保状态以可预测的方式变化。这个状态自我管理应用程序由以下部分组成：state：驱动应用程序的数据源view：以声明方式将状态映射到视图act??ions：响应用户在视图上输入引起的状态变化1.安装npminstallvuex--saveoryarn添加vuex2.使用每个Vuex应用程序的核心是商店（仓库）。“商店”基本上是一个容器，可以容纳应用程序的大部分状态。Vuex和纯全局对象有两个区别：Vuex的状态存储是响应式的。当Vue组件从store中读取状态时，如果store中的状态发生变化，相应的组件将相应地高效更新。您不能直接更改商店中的状态。更改存储中状态的唯一方法是显式提交更改。这使我们能够轻松跟踪每个状态变化，使我们能够实施一些工具来帮助我们更好地理解我们的应用程序。3.注册在src下创建一个Vuex文件夹，在文件夹中创建store.js，importandregisterimportVuefrom'vue'importVuexfrom'vuex'Vue.use(Vuex)toimportimportstoreinmain.jsfrom'./vuex/store'newVue({el:'#app',router,//提供store对象给"store"选项，可以将store实例注入所有子组件store,template:'',components:{App}})4.在项目中调用在store文件中创建并导出exportdefaultnewVuex.Store({//保存初始状态的地方state:{count:0},//定义方法改变状态的地方mutations:{//statestatenumparameterspassedinincrement:(state,num)=>{console.log(state)state.count=num}}})5.callstatethis.$store.state.count//可以在computed属性中调用computedcomputed:{src(){returnthis.$store.state.count}},6.修改statethis.$store.commit('increment',10)//以payload的形式分发this.$store.commit({type:'increment',amount:10})//分发this.$store.commit('increment',{amount:10})in对象的形式7.actionAction与mutation比较相似，不同的是Action提交mutation，而不是直接改变状态。动作可以包含任意异步操作。//异步动作actions:{increments(context,num){context.commit('increment',num)}}Action函数接受一个与store实例具有相同方法和属性的上下文对象，所以你可以调用context.commit提交一个突变，或者通过context.state和context.getters获取状态和getters。8.Triggeractionthis.$store.dispatch('increments',50)9.由于Module使用单状态树，所以应用的所有状态都会集中到一个比较大的对象中。当应用程序变得非常复杂时，存储对象会变得非常臃肿。为了解决以上问题，Vuex允许我们将store拆分成模块。每个模块都有自己的状态、突变、动作、吸气剂，甚至还有嵌套的子模块——从上到下以相同的方式拆分：constmoduleA={state:{...},mutations:{...},动作：{...}，吸气剂：{...}}constmoduleB={状态：{...}，突变：{...}，动作：{...}}conststore=newVuex。Store({modules:{a:moduleA,b:moduleB}})store.state.a//->moduleA的状态store.state.b//->moduleB的状态
