Vuex模块：开启命名空间

来源：read://https_www.cnblogs.com/?url=https%3A%2F%2Fwww.cnblogs.com%2Fsea-breeze%2Fp%2F11321961.html

模块开启命名空间后，享有独自的命名空间。

{

    "模块1":{

        state:{},

        getters:{},

        mutations:{},

        actions:{}

    },

    "模块2":{

        state:{},

        getters:{},

        mutations:{},

        actions:{}

    }

}

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

mapXXXs('命名空间名称',['属性名1','属性名2'])

mapXXXs('命名空间名称',{

　　'组件中的新名称1':'Vuex中的原名称1',

　　'组件中的新名称2':'Vuex中的原名称2',

})

一 项目结构

二 main.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 defaultnew Vuex.Store({

  modules: { cat, dog }

});

四 cat.js

exportdefault {

  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

exportdefault {

  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);

    }

  }

};

六 HelloWorld.vue

七 运行效果

'