记录vuex module 模块化分割

参考官网例子，加深下vuex的学习。
随着项目的复杂度增大，为了方便管理vuex，一般会将其按功能分割成不同的模块，方便日后管理，先看下整体的目录结构：

目录结构

store里面暂时弄了common和shop两个模块，每个模块拥有自己的 state、mutation、action、getter

模块代码示例

先列下shop模块代码：

state.js

export default {
  module: "shop",
  name: "shop模块"
};

mutation-types.js

export const SET_MODULE = "SET_MODULE";

export const SET_NAME = "SET_NAME";

mutations.js

import * as types from "./mutation-types";

export default {
  [types.SET_MODULE](state, data) {
    state.module = data;
  },
  [types.SET_NAME](state, data) {
    state.name = data;
  }
};

getters.js

export default {
  module: state => state.module,
  name: state => state.name
};

actions.js

import * as types from "./mutation-types";
export default {
  shopAction({ commit }, params) {
    commit(types.SET_MODULE, params.module);
    commit(types.SET_NAME, params.name);
  }
};

index.js

import state from "./state";
import mutations from "./mutations";
import getters from "./getters";
import actions from "./actions";

export default {
  namespaced: true,//增加命名空间
  state,
  getters,
  mutations,
  actions
};

store index.js

import Vue from "vue";
import Vuex from "vuex";

import common from "./common";
import shop from "./shop";

import createLogger from "vuex/dist/logger";
Vue.use(Vuex);
const debug = process.env.NODE_ENV !== "production";
export default new Vuex.Store({
  modules: {
    common,
    shop
  },
  strict: debug,
  plugins: debug ? [createLogger()] : []
});

使用

mapGetters

computed: {
    ...mapGetters("shop", {
      shopModule: "module",
      shopName: "name"
    })
}

mapMutations

...mapMutations("shop", {
      setShopName: "SET_NAME",
      setShopModule: "SET_MODULE"
})

mapActions

...mapActions("shop", ["shopAction"])//使用shopAction：this.shopAction(params)

在线预览：

弄了个可以跑的小demo，方便大家查看效果和代码（自备梯子，不然打不开）

在线预览效果

demo代码

<template>
  <div class="hello">
    <div>
      <h1>vuex common模块</h1>
      <p>name:{{ commonName }}</p>
      <p>module:{{ commonModule }}</p>
      <div>
        <div>
          <input type="text" v-model="common.name" placeholder="请输入name值" />
          <input
            type="text"
            v-model="common.module"
            placeholder="请输入module值"
          />
        </div>
        <button @click="changeCommonName">修改name</button>
        <button @click="changeCommonModule">修改module</button>

        <button @click="changeCommonAll">action修改全部</button>
      </div>
    </div>
    <hr />
    <div>
      <h1>vuex shop模块</h1>
      <p>name:{{ shopName }}</p>
      <p>module:{{ shopModule }}</p>
      <div>
        <input type="text" v-model="shop.name" placeholder="请输入name值" />
        <input type="text" v-model="shop.module" placeholder="请输入module值" />
      </div>
      <button @click="changeShopName">修改name</button>
      <button @click="changeShopModule">修改module</button>

      <button @click="changeShopAll">全部修改</button>
    </div>
  </div>
</template>
<script>
import { mapMutations, mapGetters, mapActions } from "vuex";
export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "Vuex Module",
      common: {
        name: "",
        module: ""
      },
      shop: {
        name: "",
        module: ""
      }
    };
  },
  computed: {
    ...mapGetters("common", {
      commonModule: "module",
      commonName: "name"
    }),
    ...mapGetters("shop", {
      shopModule: "module",
      shopName: "name"
    })
  },
  methods: {
    ...mapMutations("common", {
      setCommonName: "SET_NAME",
      setCommonModule: "SET_MODULE"
    }),
    ...mapMutations("shop", {
      setShopName: "SET_NAME",
      setShopModule: "SET_MODULE"
    }),
    ...mapActions("common", {
      setCommonAction: "commonAction"
    }),
    ...mapActions("shop", ["shopAction"]),
    changeCommonName() {
      this.setCommonName(this.common.name);
    },
    changeCommonModule() {
      this.setCommonModule(this.common.module);
    },
    changeCommonAll() {
      this.setCommonAction(this.common);
    },
    changeShopName() {
      this.setShopName(this.shop.name);
    },
    changeShopModule() {
      this.setShopModule(this.shop.module);
    },
    changeShopAll() {
      this.shopAction(this.shop);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style></style>

小技巧

建议大家开发中开启vuex的debug，不合理的修改state数据都会有警告，而且可以很直观的看到store数据的变化过程，详见上面store index.js

结尾

写的不太好，大家见谅，看demo比较直观，配合官网module文档