vuex全面解析，看完就上手

vuex是一个采用集中管理组件依赖的共享数据的工具，可以解决不同组件之间的数据共享问题。要修改state状态，只能通过mutations执行同步代码。ajax、timer等代码不能在mutation中执行异步代码。必须通过Actions，然后将数据提交给mutations，完成state的状态，即共享数据。在组件中的引用组件中，可以调用actionvuexbasic-initialization函数新建一个脚手架工程。在项目中应用vuex$vuecreatedemo，开始vuex的初始化。选择模式时，选择默认模式初始化：第一步：npmivuex--save=>Installtorun-timedependencies=>项目上线后仍然使用的依赖，development-timedependencies=>Development-timedependenciesused开发调试时需要的依赖，运行时依赖，项目上线运行第二步还需要：在main.js中importVuexfrom'vuex'第三步：Vue.use(Vuex)=>在vuex中调用一个install方法在main.js中第四步：conststore=newVuex.Store({...configurationitem})第五步：在根实例中配置store选项指向store实例对象importVuefrom'vue'importVuexfrom'vuex'Vue.use(vuex)conststore=newVuex.Store({})newVue({el:'#app',store})vuexfoundation-statestate是放置所有公共状态的属性，如果你有一个公共状态数据，你只需要在状态对象中定义它state//初始化vuex对象conststore=newVuex.Store({state:{//管理数据count:0}})如何获取组件中的count？原始形式——插值表达式可以在App.vue组件中使用。$store获取vuex中的store对象实例，可以通过state属性attribute获取count，如下计算属性中的属性//在组件computed中的computed属性中定义state中的数据：{count(){returnthis.$store.state.count}}

helperfunction-mapStatemapState是一个辅助函数，可以帮助我们将store中的数据映射到组件的计算属性上。很方便的用法：第一步：importmapStateimport{mapState}from'vuex'第二步：以数组状态属性的形式导入mapState(['count'])上面代码的最终结果类似于count(){returnthis.$store.state.count}第3步：使用扩展运算符将导出的状态映射到计算属性computed:{...mapState(['count'])}vuexfoundation-mutations状态数据只能通过mutations修改，mutations必须同步更新才能定义mutationsconststore=newVuex.Store({state:{count:0},//definemutationsmutations:{}})格式说明mutations是一个对象，里面存储了修改状态的方法mutaiions:{//方法中的第一个参数参数是当前store的state属性//payload加载传输参数调用mutaiions时，可以传参数传loadaddCount(state){state.count+=1}}，如何调用mutationsin组件原形-$store新组件child-a.vue，内容为按钮button，点击按钮调用mutations传递参数addCount(state,payload){state.count+=payload}this.$store.commit('addCount',10)辅助函数-mapMutationsmapMutations很像mapState，提取位于mutations中的方法，我们可以导入import{mapMutations}from'vuex'methods:{...mapMutations(['addCount'])}上面代码的意思是添加mutations的方法导入到methods中，相当于methods:{//commit(方法名,加载参数)addCount(){this.$store.commit('addCount')}}此时，可以直接通过this.addCount调用了+100但请注意：Vuex要求异步代码不能写在mutations中。如果有异步ajax请求，应该放在actionsvuexbase-actionsstate里面存储数据，mutations同步更新数据，actions负责异步操作。defineactionsactions:{//获取异步数据context是指当前store实例可以通过context.state获取state或者通过context.commitmutation提交s，也可以使用context.diapatch来调用其他的actiongetAsyncCount(context){setTimeout(function(){//1秒后，需要给个数字修改状态context.commit('addCount',123)},1000)}}原始调用-$storeaddAsyncCount(){this.$store.dispatch('getAsyncCount')}调用addAsyncCount(){this.$store.dispatch('getAsyncCount',123)}辅助函数-mapActionsactions还有辅助功能，可以直接通过这个将action导入组件import{mapActions}from'vuex'methods:{...mapActions(['getAsyncCount'])}。方法可以调用+Asynchronousvuex基础-除了状态，有时候我们需要从状态中导出一些状态。这些状态取决于状态。这时候就会用到getters。比如state中定义了list，就是1-10的数组，state:{list:[1,2,3,4,5,6,7,8,9,10]}组件，需要显示所有大于5的数据，正常的方式是需要在组件中进一步处理list，但是getters可以帮助我们实现definegettersgetters:{//getters函数的第一个参数是state//必须有返回值filterList:state=>state.list.filter(item=>item>5)}使用getters原始方式-$store

{{$store.getters.filterList}}

辅助函数-mapGetterscomputed:{...mapGetters(['filterList'])}

{{filterList}}

Vuex-Module中的模块化使用单个状态树，应用程序的所有状态将相对集中到一个大当应用程序变得非常复杂时，存储对象会变得相当臃肿。这句话的意思是，如果所有的状态都放在state里面，当项目越来越大的时候，Vuex会越来越难维护。因此，Vuex有一个模块化的应用定义user和settinguser两个模块中管理用户的statetokensettingname中管理应用的名称conststore=newVuex.Store({modules:{user:{state:{token:'12345'}},setting:{state:{name:'Vuexinstance'}}})定义child-b组件，分别显示用户的token和应用名称请注意：此时要获取子模块的状态，需要通过$store.state.module名称。Propertynametoget获取起来有点麻烦，我们可以通过之前学过的getters来改变getters：{token:state=>state.user.token,name:state=>state.setting.name}请注意：这个吸气剂是根级吸气剂。参考computedthroughmapGetters:{...mapGetters(['token','name'])}Namespacenamespaced这里注意理解，默认情况下，模块内部的actions、mutations和getters都是在全局命名空间注册的-这使多个模块能够响应相同的突变或动作。这句话的意思是刚才的user模块还是setting模块，它的action、mutations和getters其实是不区分的，可以直接全局调用，比如user:{state:{token:'12345'},mutations:{//这里的state表示用户的状态updateToken(state){state.token=678910}}},通过mapMutations调用方法:{...mapMutations(['updateToken'])}修改token但是，如果我们要保证内部模块的高封闭性，可以使用nameSpaced来设置高封闭性吗？可以这样理解，如果一个家庭分开，在这个那时，你的父母可以自由进出分配给你的小家。如果你觉得你没有隐私，我们可以给你的门加一把锁（namespacenameSpaced），你的父母就不能再进出你的小家，比如user:{namespaced:true,state:{token:'12345'},mutations:{//这里的state代表用户的stateupdateToken(state){state.token=678910}}}，使用带有命名空间的模块action/mutations/getters方案1：带上模块方法的属性名路径：{...mapMutations(['user/updateToken']),test(){this['user/updateToken']()}}修改token方案二：createNamespacedHelpers创建一个基于某个命名空间的helper函数>修改token2