墨龙吟 2019-06-30
参考官网例子,加深下vuex的学习。
随着项目的复杂度增大,为了方便管理vuex,一般会将其按功能分割成不同的模块,方便日后管理,先看下整体的目录结构:
store里面暂时弄了common
和shop
两个模块,每个模块拥有自己的 state
、mutation
、action
、getter
先列下shop模块代码:
export default { module: "shop", name: "shop模块" };
export const SET_MODULE = "SET_MODULE"; export const SET_NAME = "SET_NAME";
import * as types from "./mutation-types"; export default { [types.SET_MODULE](state, data) { state.module = data; }, [types.SET_NAME](state, data) { state.name = data; } };
export default { module: state => state.module, name: state => state.name };
import * as types from "./mutation-types"; export default { shopAction({ commit }, params) { commit(types.SET_MODULE, params.module); commit(types.SET_NAME, params.name); } };
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.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()] : [] });
computed: { ...mapGetters("shop", { shopModule: "module", shopName: "name" }) }
...mapMutations("shop", { setShopName: "SET_NAME", setShopModule: "SET_MODULE" })
...mapActions("shop", ["shopAction"])//使用shopAction:this.shopAction(params)
弄了个可以跑的小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文档