Vuex.Store 模块拆分成多个子模块

主 store 文件 引用 多个模块 每个模块下边有多个 module 文件

引用顺序:

     main.js

        → store/index.js

               → test1/index.js

                       → test1-1.module.js

                       → test1-2.module.js

               → test2/index.js

                       → test2-1.module.js

                       → test2-2.module.js

在 main.js 引用

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./core/services/store";

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

引用子模块

编辑子模块 test

test.module.js 的内容 (我用的是异步的)

import ApiService from "@/core/services/api.service";
// path
const REQ_ITEM = "test";

// action types
export const GET_ITEM = "getTest";

// mutation types
export const SET_ITEM = "setTest";
export const SET_ERROR = "setError";

export default {
  state: {
    errors: null,
    item: {}
  },
  getters: {
    [GET_ITEM]: state => state.item
  },
  actions: {
    [GET_ITEM](context) {
      return new Promise(resolve => {
        ApiService.get(`${REQ_ITEM}`)
          .then(({ data }) => {
            context.commit(SET_ITEM, data.data);
            resolve(data);
          })
          .catch(({ response }) => {
            context.commit(SET_ERROR, response.data);
          });
      });
    }
  },
  mutations: {
    [SET_ITEM](state, data) {
      state.item = data || {};
    },
    [SET_ERROR](state, data) {
      state.errors = data.msg;
    }
  }
};

感觉整个项目清爽很多

引用

import { mapGetters, mapActions } from "vuex";
import { GET_ITEM } from "@/core/services/test/test.module";

export default {
  data() {
    return {
      test: "测试数据测试数据测试数据测试数据",
      error: ""
    };
  },
  computed: {
    ...mapGetters({
      item: GET_ITEM
    })
  },
  mounted() {
    this.getItem();
    // 返回的值
    console.log(this.item);
  },
  methods: {
    ...mapActions({
      getItem: GET_ITEM
    })
  }
};