vuex命名空间的使用 vuex命名空间的使用

Vuex由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。
因此，Vuex 允许我们将 store 分割成模块（module），每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块。
默认情况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间的，这样使得多个模块能够对同一 mutation 或 action 作出响应。如果希望你的模块具有更高的封装度和复用性，此时就用到了命名空间这个概念。

{"模块1":{state:{},getters:{},mutations:{},actions:{}},"模块2":{state:{},getters:{},mutations:{},actions:{}}}

mapState、mapGetters、mapMutations、mapActions第一个参数是字符串（命名空间名称），第二个参数是数组（不需要重命名）/对象（需要重命名）。

mapXXXs('命名空间名称',['属性名1','属性名2'])mapXXXs('命名空间名称',{'组件中的新名称1':'Vuex中的原名称1','组件中的新名称2':'Vuex中的原名称2',})

项目结构

文章图片

mian.js

import Vue from "vue"; import App from "./App.vue"; import router from "./router"; import store from "./store/index"; Vue.config.productionTip = false; new Vue({router,store,render: h => h(App)}).$mount("#app");

index.js

import Vue from "vue"; import Vuex from "vuex"; import cat from "./modules/cat"; import dog from "./modules/dog"; Vue.use(Vuex); export default new Vuex.Store({modules: { cat, dog }});

cat.js

export default {namespaced: true,// 局部状态state: {name: "蓝白英短",age: 1},// 局部读取getters: {desc: state => "宠物：" + state.name},// 局部变化mutations: {increment(state, payload) {state.age += payload.num; }},// 局部动作actions: {grow(context, payload) {setTimeout(() => {context.commit("increment", payload); }, 1000); }}};

dog.js

export default {namespaced: true,// 局部状态state: {name: "拉布拉多",age: 1},// 局部读取getters: {desc: state => "宠物：" + state.name},// 局部变化mutations: {increment(state, payload) {state.age += payload.num; }},// 局部动作actions: {grow(context, payload) {setTimeout(() => {context.commit("increment", payload); }, 1000); }}};

hello.vue

【vuex命名空间的使用】运行效果