Vuex的超详细讲解和具体使用的详细记录（篇幅略长，建议收藏）

vuex的官方定义是什么Vuex是专门为Vue.js应用开发的状态管理模型。它使用集中存储来管理应用程序所有组件的状态，并使用相应的规则来确保状态以可预测的方式变化。vuex初学，看了这个官方定义，黑色的问号，感觉每个字都认识，但是放在一起好像没看懂。好吧，让我们用白话翻译一下。补充：官方文档在定义一个概念的时候，确实需要表达的简明扼要，所以才会出现定义概念略显晦涩的这种情况。用大白话解释一下，Vuex是专门为Vue.js应用开发的状态管理模型Vuex是为vue.js项目开发的插件（包）。本插件（包）主要用于状态管理。问题：什么是状态管理？状态管理就是管理状态（好像是废话）。其实在开发中，经常听到的一个词就是状态。什么是状态？我们知道灯泡的亮和灭分别是一个固定的状态。我们可以用1代表开，0代表关。在这种情况下，状态可以用数字表示。另一方面，状态是数据的具体表现形式，所以我们可以这样理解：状态管理就是数据管理。再进一步，vuex就是管理vue中的数据。集中存储用于管理应用程序所有组件的状态。鲁迅说：Vue是组件化开发，就是把一个页面拆分成一个个小块。每个图块必须有自己的渲染数据。比如下拉框有下拉框要选择的数据，表格有表格要呈现的数据。那么这些数据就可以直接放在.vue文件中的数据中进行管理，但是如果是大型项目，.vue文件中进行管理的数据就略显欠缺。所以：可以使用vuex统一存储和管理各个组件的数据。Vuex就像一个仓库，用来存放组件中需要使用的数据。至于管理，就是在vuex中进行增删改查、访问、修改、删除等操作，并使用相应的规则，以可预测的方式保证状态。这句话的意思是，如果要访问、修改、删除vuex仓库中的状态数据，需要遵循一定的语法规则，比如按照动作规则进行增删改查——>mutaion-->state，比如在vuex中使用增删改查数据等辅助功能。这个具体规则会在下面的vuex使用步骤中一一说明，所以vuex是一个存储数据的仓库。所以我们在使用vuex的时候，一般都会新建一个store文件夹。店字的中文意思是商店、仓库的意思。vuex应用场景的正常数据可以放在data里面，避免麻烦。一般小项目很少用vuex。毕竟vuex的步骤有点多。一般公共数据放在vuex中比较好。毕竟组件有自己的数据来存储数据，还有用户信息、token等公共变量。Vuex保存一份，localstorage保存一份。直接从vuex中取数据，取不到就从localstorage中取。跨多个组件级别的数据通信也可以通过vuex进行管理。毕竟vuex就像一个对象，很多组件都指向这个对象。当vuex对象发生变化时，所有组件中相应的内容都会发生变化。这样就可以实现实时响应。一变，所有人都会变。第一步是构建项目。构建项目的过程不再详细描述。项目搭建完成后，我们就可以按照以下步骤使用vuex了。第一步，用npm插件下载安装vuex因为vuex是vue中专门用来管理数据的插件，所以按照可插拔框架的思想，要用就下载安装vuex,不想用的时候就卸载npminstallvuex--save第二步新建store文件夹，注册使用vuex插件如下图：如果挂载了store对象在vue对象上，那么每个组件都可以访问store对象，那么每个组件都可以使用vuex打印vue实例对象，如下图，可以看到$store的具体内容。既然挂载在vue总实例上的vuex的$store对象有我们定义的state、mutations、actions、getters，那么我们使用this.$store...就可以在各个组件上访问和使用vuex中的数据。这样就验证了vuex文档中的那句话：vuex使用集中存储来管理应用所有组件的状态。是的，它们都集中在vue实例上，可以访问所有组件的状态。其实学习vuex就是学习两点：如何在vuex中读取仓库中的数据和如何在vuex中修改仓库中的数据第三步，在vuex中读取仓库中的数据在上面的代码中，我们在vuex的state中定义了一个msg属性，然后粘贴代码exportdefaultnewVuex.Store({state:{msg:'Iamvuex'},//etc...})接下来，我们使用这个数据inthecomponentandpresentitonthepage方法一直接使用双括号表达式（不推荐）

{{this.$store.state.msg}}

方法一不太优雅，一般不用，主要使用方法2或者方法3在方法2mounted中访问vuex中的数据方法三在vuex中使用computed取数据第四步修改vuex中的数据一般是在事件的回调函数中修改vuex中的数据，比如我们点击一??个按钮进行修改直接vuex中的数据（不推荐）这个方法勉强能用，但是vuex在开启严格模式的时候会报错。开启严格模式的代码如下：exportdefaultnewVuex.Store({strict:true,//开启严格模式state:{msg:'Iamvuex'},//Wait...})错误信息示意图如下：错误信息含义Error:[vuex]donotmutatevuexstorestateoutsidemutationhandlers.不要在没有通过变异操作的情况下修改vuexstore中的state状态值，所以我们想到了vuex定义的那句话：并使用相应的规则来保证state以一种可预测的方式变化。这里对应的规则是指如果要修改vuex中的数据，必须要按照vuex中操作数据的步骤流程规则，哎，不然我给你报错那么vuex定义的修改状态的规则是什么呢？请看下图中的方法2action-->mutation-->state。我们来看看官方的图。看完上图，我们可以总结出vuex的使用规则如下。组件要改vuex里的数据，但是组件我只是口头召唤actions干活，就是：dispatchactions（组件说：嘿，actions，我要改vuex里的数据，你发一个request，get数据我要从后端接口来改变它）action获取到消息后，会向后端发送请求，获取后端返回的数据。action获取到后端返回的数据后，将数据commit提交给mutations，即：commitmutations（actions获取数据以后，也是偷懒的，把数据交给仓库管理员mutations，告诉对应的数据tobechange,thenwithdraw)mutations相当于最终的仓库管理员，仓库管理员会修改vuex仓库中的数据，即：mutatethestate(mutationsworkhard,changethestatedatainvuex,afterthechange，等待接下来的工作，mutations修改数据的过程会被仓库监控，即vue的开发工具devTool记录）并且vue数据是响应式的。一旦仓库数据发生变化，仓库数据对应的组件就会重新渲染，所以页面效果也会发生变化。如果组件不异步发送请求更改数据，也可以直接skipactions，直接让仓库管理员mutations去修改数据，不过这种方法也不过分代码如下//Component//vuexexportdefaultnewVuex.Store({strict:true,state:{msg:'我是vuex'},mutations:{//这里的第一个形参state是仓库state，可以访问state中msg的值，即可以修改state//第二个形参params是传入的数据mutationsChangeactions(state,params){console.log(state,params);state.msg=params}},actions:{//这里的形参存储对象下有一个commit方法//通知函数的执行在对应的mutationsactionsChange(store){console.log(store);setTimeout(()=>{store.commit('mutationsChange','Specificationmodificationvuex')},500);}}})效果图为如下devtool记录mutations的操作补充getter处理在getter中，我们可以定义一个函数。该函数用于修改状态中的值。该函数接收参数状态。此状态参数是当前状态对象。通过这个参数，可以对state中的数据进行处理和处理。返回出来在组件中使用//vuexexportdefaultnewVuex.Store({strict:true,state:{msg:'I'mvuex'},getters:{gettersChange(state){returnstate.msg+'---getter修改state中的数据'}},})在组件中使用时，直接使用getter中的数据即可，如下：this.$store.getters。当然gettersChange也可以使用getter，就是在组件中取到vuex中的数据后，我们再进行处理，但是最好在getter中处理，因为这样写代码更优雅方式。它似乎可以让我们节省几行代码。我们以vuex中的state为例。假设我们需要获取一个组件中多个状态下的值。这样的话，这条语句就得写多次，this.$store.state.msg1,this.$store.state.msg2,this.$store.state.msg3等，为了简单起见，四个辅助函数是封装在vuex里面，用来对应state、mutations、action、getters的操作。辅助函数，简单来说就是游大游封装的语法糖。辅助函数通常与计算属性和方法一起使用。使用mapState辅助功能。第一步，假设vuex仓库中有三个数据，我们需要在组件上使用这三个数据//store.jsexportdefaultnewVuex.Store({state:{msg1:'辅助功能一',msg2:'辅助功能二',msg3:'辅助功能三',},}第二步，从vuex插件中引入辅助功能import{mapState,mapMutations,mapActions,mapGetters}from'vuex'第三步步骤是利用calculation属性中的辅助函数mapstate获取state中的数据//方法一，数组形式computed:{...mapState(['msg1','msg2','msg3'])},//方法二、对象形式（vuex模块化常用）computed:{...mapState({msg1:state=>state.msg1,msg2:state=>state.msg2,msg3:state=>state.msg3,})}，第四步，可以直接在组件{{msg1}}

{{msg2}}

中的差异表达式中使用第五步，页面渲染为下面mapGetters辅助函数的使用方法和mapStatecomputed基本相同：{...mapGetters(['msg']),}mapMutations辅助函数比如我们在按钮的回调函数中触发突变点击事件。对比一下，不带辅助函数和使用辅助函数vuex结构突变的语法写法区别：{kkk(state,params){state.msg=params}},html结构js代码注意：使用辅助函数时好像没有传参的地方。事实上，辅助功能帮助我们默默地传递它们。这个参数需要写在html结构中的click语句中。如上面代码：辅助函数mapActionsmapActions辅助函数mapActions的用法和mapMutations基本相同，换个词就行了，这里就不细说了。。。mapActions(["sss"])的意思是：触发Actions中sss函数vuex的模块模块化，提模块化，思路还是那句话,大大小小,易于管理多种语言有模块化的应用，vuex也是如此。试想一下，如果所有的状态数据都写在一起，很容易让人眼花缭乱，难以管理。所以在vuex的设计中，游老师做了一个模块化的模块处理图步骤。在组件中使用vuex模块化，获取vuex模块中的数据。这里以state中的数据为例，getters中的数据基本都是写入的。相同，没有更多细节打印store对象，可以看到对应的值和修改vuex模块中的数据这里以触发mutations为例，action的写法基本相同，没有使用辅助功能。使用辅助函数注意我上面使用vuex模块化模块时，有no添加namespace命名空间，所以提交相应模块下的mutations时，可以直接写this.$store.commit('moduleChange','我是一个参数')或者...mapMutations(['moduleChange'])像这样的话，vuex会去它所有的module中去寻找moduleChange函数，然后修改，有点浪费性能，因为，默认情况下，vuex模块内部的actions、mutations和getters是挂载并注册在全局命名空间中的，所以要让多个模块对同一个mutation或action进行操作，一直搜索直到找到为止。但是一般情况下，我们在使用vuex模块化的时候，都会加入命名空间来实现独立性和复用性。接下来说说vuex模块化的标准用法，也就是不加命名空间，加命名空间的用法，万事俱备。如果你添加它，你只会去特定的模块找到它，所以如果你使用命名空间，提交突变的方式将改变如下//不要使用辅助函数moduleChange(){this.$store.commit('vue/moduleChange');//以斜杠分隔，斜杠前写对应的模块名，斜杠后写mutations中对应的方法名}//使用辅助函数...mapMutations('vue',['moduleChange'])//用逗号分隔，逗号前写模块名，逗号后写数组，方法名放在数组中对应的mutations//3.在别名状态下...mapMutations({anotherName:'vue/moduleChange'//和不使用辅助功能一样}),综上所述，还是回到vuex官网定义的那句话：Vuexisa**专为Vue.js应用开发的状态管理模式**。它使用中心化存储来管理应用程序所有组件的状态，并使用相应的规则来保证状态以一种可预测的方式变化官，我们来玩玩吧，哈哈《码破苍穹》强势码派的名字是游哒，代码变身翅膀去人间祭祀VUE这么恐怖，真的好吓人。作者码渣虽然弱，但是心中有一个梦想，希望大家喜欢鼓励一下