共计 3399 个字符，预计需要花费 9 分钟才能阅读完成。
参考官网例子，加深下 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 文档
