vuex-module-命名空间

• 默认情况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间的。

• 弊端1：不同模块中有相同命名的mutations、actions时，不同模块对同一 mutation 或 action 作出响应。

• 弊端2：当一个项目中store分了很多模块的时候，在使用辅助函数mapState、mapGetters、mapMutations、mapActions时，很难查询，引用的state、getters、mutations、actions来自于哪个模块，不便于后期维护。

• 解决:可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。当模块被注册后，它的所有 getter、action
  及 mutation 都会自动根据模块注册的路径调整命名。

开始

1. 目录结构
   
2. main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

3.store-index.js

import Vue from 'vue'
import Vuex from 'vuex'
import cat from './cat/index.js'
import dog from './dog/index.js'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    cat,
    dog
  }
})

4.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);
      }
    }
  };

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

7. 导入方式
   导入方式一 ：

// 1. 导入辅助函数mapState
import { mapState } from "vuex";
export default {
  props: {
  computed: {
      //2. 在辅助函数mapState的第一参数上，填写上模块的命名空间名。根据挂载方式不同，此处的命名空间名就是 wechatType 或 aaa。
    ...mapState('cat', ["name",age])
    //或者
    ...mapState("cat", {
   	   catName: "name",  //自己命名
       catAge: "age"     //自己命名
   }),
  },

导入方式二

//通过使用 createNamespacedHelpers 创建基于某个命名空间辅助函数。
//它返回一个对象，对象里有新的绑定在给定命名空间值上的组件绑定辅助函数
import { createNamespacedHelpers } from "vuex";
const { mapState } = createNamespacedHelpers('cat')
export default {
  computed: {
    ...mapState(['name','age'])
  }
｝

8. vuex.vue

<template>
  <div class="hello">
    <h3>Vuex状态树</h3>
    <div>{{this.$store.state}}</div>
    <h3>{{name}}</h3>
    <h3>{{age}}</h3>
    <!-- <h3>{{desc}}</h3> -->
    <h3 @click="catMutations">cat-Mutations</h3>
      <h3 @click="catActions">cat-长大了</h3>
    <h3>mapState</h3>
    <!-- <div>{{catName}} {{catAge}}</div> -->
    <div>{{dogName}} {{dogAge}}</div>
    <h3>mapGetters</h3>
    <div>{{catDesc}}</div>
    <div>{{dogDesc}}</div>
    <h3>mapMutations</h3>
    <button @click="catIncrement({num:1})">猫变化</button>
    <button @click="dogIncrement({num:1})">狗变化</button>
    <h3>mapActions</h3>
    <button @click="catGrow({num:1})">猫动作</button>
    <button @click="dogGrow({num:1})">狗动作</button>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
// import { createNamespacedHelpers } from "vuex";
// const { mapState,mapMutations,mapGetters,mapActions } = createNamespacedHelpers('cat')
export default {
  name: "HelloWorld",
//   computed: {
//     ...mapState(['name','age']),
//     ...mapGetters(['desc'])
//   },
//   methods: {
//     ...mapMutations(['increment']),

//     catMutations(){
//       this.increment({num:2})
//     },
    
//     ...mapActions(['grow']),

//     catActions(){
//       this.grow({num:3})
//     }

//   }


  computed: {
    ...mapState("cat", ['name','age']),
    ...mapState("dog", {
      dogName: "name",
      dogAge: "age"
    }),
    ...mapGetters("cat", {
      catDesc: "desc"
    }),
    ...mapGetters("dog", {
      dogDesc: "desc"
    })
  },
  methods: {
     
    
    ...mapMutations("cat", { catIncrement: "increment" }),
    ...mapMutations("dog", { dogIncrement: "increment" }),
    ...mapActions("cat", { catGrow: "grow" }),
    ...mapActions("dog", { dogGrow: "grow" })
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

**

特别感谢两篇博客让我对vuex-module-命名空间有更深层次的理解 如果不对请指正，谢谢

**
https://www.cnblogs.com/sea-breeze/p/11321961.html --沙滩海风
Vuex模块：开启命名空间

https://www.cnblogs.com/guojbing/p/10852362.html --___冰