1。什么是vuex？官方的理解是：Vuex是专门为Vue.js应用开发的状态管理模型。它使用集中存储来管理应用程序所有组件的状态，并使用相应的规则来确保状态以可预测的方式变化。Vuex也集成在Vue官方调试工具devtoolsextension中，提供零配置穿越调试、状态快照导入导出等高级调试功能。2、什么是状态管理？让我们从一个简单的Vue计数应用程序开始：newVue({//statedata(){return{count:0}},//viewtemplate:`
{{count}}
`,//actionsmethods:{increment(){this.count++}}})这个状态管理包括三个部分：状态，驱动应用程序的数据源；视图，它以声明的方式将状态映射到视图；动作，响应用户在视图上的输入引起的状态变化。三、vuex的工作流程vue官网给出的流程图首先，如果一个Vue组件在调用某个VueX方法的过程中，或者发生异步操作的时候，需要向后端请求，需要派发actions方法在VueX中以确保数据完整性。同步。可以说action的存在就是让mutations中的方法在异步操作中起作用。如果没有异步操作，那么我们可以直接在组件中的状态中的Mutations中提交自己写的方法来实现对状态成员的操作。注意，1.3.3节中提到，不建议直接对组件中state的成员进行操作，因为不能直接修改（例如：this.$store.state.name='hello'）由VueDevtools监控使用。4.Mutationsmutations是操作状态数据的方法的集合，如修改、添加、删除等。4.1Mutationsstate使用的方法是当前VueX对象中的statepayload，用于方法调用时传递参数。比如我们写一个方法，可以在执行的时候把下面例子中的name值改成“jack”。我们只是做index.jsimportVuefrom'vue'importVuexfrom'vuex'Vue.use(Vuex)conststore=newVuex.store({state:{name:'helloVueX'},mutations:{//es6syntax,这相当于edit:funcion(){...}edit(state){state.name='jack'}}})exportdefaultstore在组件中，我们需要以这种方式调用这个mutation——例如，在App.vue中的一个方法中：this.$store.commit('edit')5.直接在mutation方法中进行异步操作，Actions会导致数据失效。所以提供了Actions来进行异步操作，最后提交mutation的方法。Actions中的方法有两个默认参数context上下文（相当于箭头函数中的this）objectpayload挂载参数比如我们2秒后执行2.2.2小节的edit方法由于setTimeout是异步操作，所以需要使用actionsactions:{aEdit(context,payload){setTimeout(()=>{context.commit('edit',payload)},2000)}}6.标准目录结构store:.│actions.js│getters.js│index.js│mutations.js│mutations_type.js##此项是存放mutations方法常量的文件。您可以根据需要添加│└─模块。Astore.js对应的内容存放在对应的文件中，和之前一样，在index.js中的Store和exportstore。state中的数据尽量放在index.js中。如果模块中有很多Astore本地模块状态，也可以进行细分。