模块化+命名空间
1, 目的: 让代码更好维护
2, 修改store.js
store/Count.js:
注意:namespaced:true, 开启命名空间
export default { namespaced:true, //准备actions--用于响应组件中的动作 actions:{ increment(context,value){ context.commit('INCREMENT',value) //commit中的increment: 对应mutations中的increment方法 } }, //准备mutations--用于操作数据(state) mutations:{ INCREMENT(state,value){ state.sum += value console.log(value,state.sum); }, DEINCREMENT(state,value){ console.log("a",value); state.sum -= value } }, //准备state = {} state:{ sum:1, school:"南昌雅腾", subject: "java" }, //准备getters , 用于加工state中的数据, 类似于computed属性 getters:{ bigSum(state){ return state.sum * 10 } } }
2, store/index.js
//该文件用于创建Vuex中最为核心 的store //引入vue import Vue from "vue"; //引入vuex库 import Vuex from "vuex"; // 使用vuex Vue.use(Vuex) //让各个组件中拥有store属性 import CountAbout from './Count' export default new Vuex.Store({ modules:{ CountAbout //......同理,可以引入其它vuex } })
3. 开启命名空间后,组件中读取state数据:
//方式一: 自己直接读取 this.$store.state.CountAbout.school //方法二: 借助mapState读取 ...mapState('CountAbout',['sum','school','subject'])
4, 开启命名空间后,组件中读取getters数据
//方式一: 自己直接读取 this.$store.getters['CountAbout/bigSum'] //方法二: 借助mapGetters读取 ...mapGetters('CountAbout',['bigSum'])
5, 开启命名空间后,组件中调用dispatch
//方式一: 自己直接读取 this.$store.dispatch('CountAbout/increment') //方法二: 借助mapGetters读取 ...mapActions('CountAbout',['increment'])
6, 开启命名空间后,组件中调用commit
//方式一: 自己直接读取 this.$store.commit('CountAbout/DEINCREMENT') //方法二: 借助mapGetters读取 ...mapMutations('CountAbout',['DEINCREMENT']),
详细借助调用:
import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
<template> <div> <p>当前的和是:{{sum}}</p> <p>当前的和*10的结果是:{{bigSum}}</p> <p>我在{{school}}, 学习{{subject}}</p> <select v-model.number="n"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select> <button @click="increment(n)">加一</button> <button @click="DEINCREMENT(n)">减一</button> </div> </template> <script> import {mapState,mapGetters,mapMutations,mapActions} from 'vuex' export default { name:'Count', data() { return { n:1 } }, methods:{ //程序员自己写 // deincrement(){ // this.$store.commit('DEINCREMENT',this.n) // //commit中的increment: 对应store.js中mutations中的increment方法 // //如果不需要actions做什么(即不需要服务员做什么), 可以直接找后厨 // }, //借助mapMutations生成对应的方法,方法中会调用commit去联系mutations(对象写法) // ...mapMutations({'DEINCREMENT':'DEINCREMENT'}) //借助mapMutations生成对应的方法,方法中会调用commit去联系mutations(数组写法) ...mapMutations('CountAbout',['DEINCREMENT']), //注意,以上调用方法要传值 //程序员自己写 // increment(){ // this.$store.dispatch('increment',this.n) // //dispatch中的increment: 对应store.js中actions中的increment方法 // }, //借助mapActions生成对应的方法,方法中会调用dispatch去联系actions(对象写法) // ...mapActions({'increment':'increment'}) //借助mapActions生成对应的方法,方法中会调用dispatch去联系actions(数组写法) ...mapActions('CountAbout',['increment']) }, computed:{ //借助mapState生成计算属性, 从state中读取数据(对象写法) // ...mapState({sum:'sum',school:'school',subject:'subject'}), //借助mapState生成计算属性, 从state中读取数据(数组写法) ...mapState('CountAbout',['sum','school','subject']), //以上相当于下面的写法 // sum(){ // return this.$store.state.sum // }, // school(){ // return this.$store.state.school // }, // subject(){ // return this.$store.state.subject // } //借助mapGetters生成计算属性, 从getters中读取数据(对象写法) // ...mapGetters({bigSum:'bigSum'}) //借助mapGetters生成计算属性, 从getters中读取数据(数组写法) ...mapGetters('CountAbout',['bigSum']) //以上相当于下面的写法 // ,bigSum(){ // return this.$store.getters.bigSum // } }, mounted() { const x = mapState({sum:'sum',school:'school',subject:'subject'}) console.log(x); }, } </script> <style> </style>