参考，加深下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代码

小技巧

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

结尾

写的不太好，大家见谅，看demo比较直观，配合