Vuex模块编码

Vuex模块化module

1. 一般store里是actions、mutations、state、Getters
2. 模块化之后就变成：模块1、模块2、模块3 —>>
3. 模块下再包括actions、mutations、state、Getters

src/store/index.js

import Vue from "vue";
// 引入vuex
import Vuex from "vuex";

Vue.use(Vuex);

/*每个模块都有actions、mutations、。。。*/
const countModlues = {
  actions: {
    // context是迷你的store，有commit
    addOdd(context, value) {
      if (context.state.sum % 2) {
        context.commit("addOdd", value);
      }
    },
  },
  mutations: {
    add(state, value) {
      console.log("mutatios调用了ADD");
      state.sum += value;
    },
    reduce(state, value) {
      state.sum -= value;
    },
    addOdd(state, value) {
      state.sum += value;
    },
  },
  state: { sum: 0,title:'test'},
  getters: {
    getSum(state) {
      return state.sum * 20;
    },
  },
};
const personModlues = {
  actions: {},
  mutations: {
    addPerson(state, value) {
      state.personList.push(value);
    },
  },
  state: { personList: [{ id: "001", name: "doris" }] },
  getters: {},
};
// 创建并导出store
export default new Vuex.Store({
  modules: {
    //简写
    countModlues,
    personModlues,
    //重写
    a:countModlues,
    //...
  },
});

使用模块以后，读取数据不是this.$store.state.xxx,以此类推

1.1.一般读取方式：

this.$store.state.模块.数据
//this.$store.getter['模块/事件']
this.$store.getter['person/getSum']

//this.$store.commit['模块/注册事件',事件]
this.$store.commit("person/addPerson", perons);

//this.$store.dispatch['模块/注册事件',事件]
this.$store.dispatch("person/addPerson", perons);

1.2.mapXXX读取

这里用mapState，mapGetter举例，其他同理可得

...mapState(['countModlues'])
...mapGetter(['countModlues'])

使用：

<!--state当中的sum-->
<div>{{countModlues.sum}}</div>
<!--getters当中的getSum-->
<div>{{countModlues.getSum}}</div>

1.3.命名空间namespaced

src/store/index.js

import Vue from "vue";
// 引入vuex
import Vuex from "vuex";

Vue.use(Vuex);

const countModlues = {
  //namespaced默认为false
  namespaced: true,
  actions: {
    // context是迷你的store，有commit
    addOdd(context, value) {
      if (context.state.sum % 2) {
        context.commit("addOdd", value);
      }
    },
  },
  mutations: {
    add(state, value) {
      console.log("mutatios调用了ADD");
      state.sum += value;
    },
    reduce(state, value) {
      state.sum -= value;
    },
    addOdd(state, value) {
      state.sum += value;
    },
  },
  state: { sum: 0 },
  getters: {
    getSum(state) {
      return state.sum * 20;
    },
  },
};
const personModlues = {
  namespaced: true,
  actions: {},
  mutations: {
    addPerson(state, value) {
      state.personList.push(value);
    },
  },
  state: { personList: [{ id: "001", name: "doris" }] },
  getters: {},
};
// 创建并导出store
export default new Vuex.Store({
  modules: {
    count: countModlues,
    person: personModlues,
  },
});

namespaced默认为false，需要设置为true，可以实现在组件当中使用mapState的另一种方法，使用时更简便

• 所有mapXX都可以这样使用，对象写法同理可的

...mapState('count',['sum','title'])
...mapActions("count", ["addOdd"]),
...mapMutations("count", ["add", "reduce"]),
...mapGetters("count", ["getSum"]),

• 使用：

<div>{{sum}}</div>