Vue全家桶（4.3）

.page{宽度：300px；margin:100pxauto}5.3。Vuex的核心概念store：每一个Vuex应用的核心都是store（仓库）。一个“store”基本上是一个容器，它包含了你应用程序状态中的大部分状态（state）：一个包含所有应用程序级状态的对象AttributeMutation：唯一修改状态的事件回调函数Action：Action类似于mutation，区别在于：1.Action提交mutation，而不是直接改变state。2.Action可以包含任何异步操作Modules：将store分成不同的modules#5.3.1.MutationNote;Mutation中不能提交异步代码，例如：importVuefrom'vue'importVuexfrom'vuex'//让vuex作为vue插件使用Vue.use(Vuex)//创建容器letstore=newVuex.Store({state:{goods_num:0},mutations:{changeCar(state,num){console.log(state)setTimeout(()=>{state.goods_num+=num},2000)}}})//exportthisstoreinstance方便注入exportdefaultstoreintovue#5.3.2.Actionissubmittedinmutation异步代码，没有办法跟踪状态的变化。如果有异步代码，需要放在Action中。异步代码执行完成后，在store/index.js中提交代码importVuefrom'vue'importVuexfrom'vuex'//让vuex作为vue插件使用Vue.use(Vuex)//创建容器letstore=newVuex.Store({state:{goods_num:0},mutations:{changeCar(state,num){state.goods_num+=num}},actions:{changeCarAction(context,num){console.log(context)setTimeout(()=>{context.commit('changeCar',num)},2000)}}})//导出这个store实例，方便vue中exportdefaultstore的注入触发这个动作,修改exportdefault{data(){return{num:12}},components:{},methods:{increase(){this.num++},decrease(){this.num--},addCarinVuexGoodsItem(){//this.$store.commit('changeCar',this.num)this.$store.dispatch('changeCarAction',this.num)}}}如果上面都搞定了，再看执行过程图片很简单#5.3.3.GetterGetter可以认为是store的计算属性，可以处理数据为了伪装效果，我们新建一个Count组件来说明.page{宽度：300px；margin:100pxauto}在store中添加mutation函数和count变量，以下是部分代码state:{goods_num:0,count:0},mutations:{changeCar(state,num){state.goods_num+=num},add(state){state.count++}}这样我们就实现了vuex版本Counter的添加，如果对count变量进行一些逻辑判断呢？我们可以使用computed在组件内部实现它。如果这个逻辑是全局的，你可以把它放在Getter中。例如：需求：当计数器达到10时，不能继续加。在store中添加getters选项importVuefrom'vue'importVuexfrom'vuex'//让vuex作为Vue的插件Vue.use(Vuex)//创建一个容器letstore=newVuex.Store({状态:{goods_num:0,计数:0},mutations:{changeCar(state,num){state.goods_num+=num},add(state){state.count++}},actions:{changeCarAction(context,num){console.log(context)setTimeout(()=>{context.commit('changeCar',num)},2000)}},getters:{newCount(state){returnstate.count>10？10:state.count}}})//把这个store实例导出方便在vue中注入exportdefaultstore。使用时，从store.getters对象中获取

{{this.$store.getters.newCount}}

。注意：如果要在getters中给函数传递参数，需要这样写getters：{newCount(state){returnstate.count>10?10:state.count},newCount2(state){//返回一个函数return(num)=>state.count>num?num:state.count}}调用时这样调用

{{this.$store.getters.newCount2(5)}}

#5.3.4.辅助函数mapState、mapGetters、mapActions这些辅助函数可以帮助我们简化一些写法。注意：使用前必须引入import{mapState,mapMutations,mapActions,mapGetters}来自'vuex'1.mapState，这个函数是一个与computed的映射，可以将传入mapState的对象或数组转换为computed属性。可以将数组和对象传递到mapState。首先，让我们看一下传入的数组。写成computed:{...mapState(['num3','num4','num5'])}注意这里传入的num3,num4,num5需要和statestate中定义的状态同名：{goods_num:0,count:0,num3:9,num4:10,num5:11}这样写，可以直接批量获取state中的数据，不用this.$store.state.num3获取值，这是辅助函数的作用，可以简化一些写法。有时，我们需要从状态中获取值进行处理，例如：computed:{num3(){returnthis.$store.state.num3>10?10:20}}如果使用Auxiliaryfunction，我们需要以object的形式传递computed:{//num3(){//returnthis.$store.state.num3>10?10:20//}...mapState({num3:state=>state.num3>10?10:20})}使用箭头函数简化代码，也可以在state中重命名state，对于示例：计算：{//num3(){//返回this.$store.state.num3>10?10:20//}...mapState({num3:state=>state.num3>10?10:20,num100:'num4'//给num4一个别名num4})}如果你想使用这个关键字，你不能使用箭头函数，所以它可以缩短为computed:{//num3(){//returnthis.$store.state.num3>10?10:20//}...mapState({num3:state=>state.num3>10?10:20,num100:'num4',num6(state){//需要取数据state中的num99是添加到state中的num6，这时候需要用到这个returnthis.num99+state.num6}})}以上是mapState的基本用法，mapMutations、mapGetters、mapActions的用法是相同的。简单示例：//mapMutations的使用方法：{//increase(){//this.$store.commit('add')//}...mapMutations({increase:'add'})}//mapActions使用方法：{//increase(){//this.$store.commit('add')//}...mapMutations({increase:'add'}),//decrease(){//this.$store.dispatch('decreaseAction')//},...mapActions({decrease:'decreaseAction'})},//mapGetters的用法computed:{//num3(){//returnthis.$store.state.num3>10?10:20//}...mapState({num3:state=>state.num3>10?10:20,num100:'num4',num6(state){returnthis.num99+state.num6}}),...mapGetters({num5:'newCount'})}#5.3.5。由于Module使用了单一的状态树，所以应用的所有状态都会被集中到一个比较大的对象中。当应用程序变得非常复杂时，存储对象可能会变得相当臃肿。为了解决以上问题，Vuex允许我们将store拆分成模块。每个模块都有自己的状态、突变、动作、吸气剂，甚至嵌套的子模块。下面是我们的store/index.js文件。我们可以尝试把它拆分成一个子模块，然后importVuefrom'vue'importVuexfrom'vuex'//让vuex作为一个vue插件Vue.use(Vuex)//创建一个容器letstore=newVuex.Store({state:{goods_num:0,//下面的state在count组件里面Thestatecount:0,num3:9,num4:10,num5:11,num6:6},mutations:{changeCar(state,num){state.goods_num+=num},//下面这个方法是count中的方法add(state){state.count++},decreaseMutation(state){state.count--}},actions:{changeCarAction(context,num){console.log(context)setTimeout(()=>{context.commit('changeCar',num)},2000)},//下面的方法是count(context)中的decreaseAction方法{setTimeout(()=>{context.commit('decreaseMutation')},1000)}},getters:{//下面这个方法是count中的方法newCount(state){returnstate.count>10?10:state.count},newCount2(状态){返回(num)=>state.count>num?num:state.count}}})//导出这个store实例，方便注入exportdefaultstore到vue开始拆分1自定义一个对象//直接定义一个SubmoduleletcountModule={state:{count:0,num3:9,num4:10,num5:11,num6:6},mutations:{add(state){state.count++},decreaseMutation(state){state.count--}},actions:{decreaseAction(context){setTimeout(()=>{context.commit('decreaseMutation')},1000)}},getters:{newCount(state,getters,rootState){返回状态.count>10？10:state.count},newCount2(state){return(num)=>state.count>num?num:state.count}}}2Hangthisobjectonthestore//创建一个容器letstore=newVuex.Store({state:{goods_num:0},mutations:{changeCar(state,num){state.goods_num+=num}},actions:{changeCarAction(context,num){console.log(context)setTimeout(()=>{context.commit('changeCar',num)},2000)}},modules:{countModule//submodule}})完整代码：importVuefrom'vue'importVuexfrom'vuex'//让vuex作为vue使用插件使用Vue.use(Vuex)//直接定义一个子模块letcountModule={state:{count:0,num3:9,num4:10,num5:11,num6:6},mutations:{add(state){state.count++},decreaseMutation(state){state.count--}},actions:{decreaseAction(context){setTimeout(()=>{context.commit('decreaseMutation')},1000)}},getters:{newCount(state,getters,rootState){返回state.count>10?10:state.count},newCount2(state){return(num)=>state.count>num?num:state.count}}}//创建容器,动作:{changeCarAction(context,num){console.log(context)setTimeout(()=>{context.commit('changeCar',num)},2000)}},modules:{countModule}})//导出这个store实例以在vue中注入exportdefaultstore5.5。何时使用vuex虽然Vuex可以帮助我们管理共享状态，但它也附带了更多的概念和框架，需要在短期和长期利益之间进行权衡。如果您不打算开发大型单页应用程序，使用Vuex可能会很乏味且多余。这是真的——如果你的应用足够简单，你最好不要使用Vuex。您只需要一个简单的商店模式。但是，如果你需要构建一个中大型的单页应用，你很可能会考虑如何在组件外部更好地管理状态，而Vuex将成为一个自然而然的选择。