记录vuex module 模块化分割

参考官网例子，加深下vuex的学习。随着项目的复杂度增大，为了方便管理vuex，一般会将其按功能分割成不同的模块，方便日后管理，先看下整体的目录结构：目录结构store里面暂时弄了common和shop两个模块，每个模块拥有自己的 state、mutation、action、getter模块代码示例先列下shop模块代码：state.jsexport default { module: “shop”, name: “shop模块”};mutation-types.jsexport const SET_MODULE = “SET_MODULE”;export const SET_NAME = “SET_NAME”;mutations.jsimport * as types from “./mutation-types”;export default { [types.SET_MODULE](state, data) { state.module = data; }, [types.SET_NAME](state, data) { state.name = data; }};getters.jsexport default { module: state => state.module, name: state => state.name};actions.jsimport * as types from “./mutation-types”;export default { shopAction({ commit }, params) { commit(types.SET_MODULE, params.module); commit(types.SET_NAME, params.name); }};index.jsimport 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.jsimport 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()] : []});使用mapGetterscomputed: { …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文档