vue3学习——vuex的使用（十）

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第11天，点击查看活动详情

Ⅲ. module的命名空间

1. 默认情况下，模块内部的action和mutation仍然是注册在全局的命名空间中的：

   • 这样使得多个模块能够对同一个 action 或 mutation 作出响应；
   • Getter 同样也默认注册在全局命名空间；

2. 如果我们希望模块具有更高的封装度和复用性，可以添加 namespaced: true 的方式使其成为带命名空间的模块：

   • 当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名；

     // 创建 home 的 store 对象
     const homeModule = {
       **namespaced: true,**
       state() {
         return {
           homeCounter: 10
         }
       },
       getters: {
         doubleHomeCounter(state) {
           return state.homeCounter * 2
         }
       },
       mutations: {},
       actions: {}
     }
     
     // 导出
     export default homeModule
     复制代码

3. 当设置了命名空间的时候，在页面中获取getters里面的内容的时候就需要使用$store.getters['模块空间名/getters方法名']：

   <template>
     <div>
       <h3>{{ $store.getters['home/doubleHomeCounter'] }}</h3>
     </div>
   </template>
   复制代码

4. 并且使用模块下面的mutations和actions的话也需要像getters这样的写法：

   • mutations：this.$store.commit('home/mutations名')
   • actions：this.$store.dispatch('home/actions名')

Ⅳ. module修改或派发根组件

1. 如果我们希望在getters中修改root中的state，那么有如下的方式：

   getters: {
     doubleHomeCounter(**state, getters, rootState, rootGetters**) { }
   }
   复制代码

2. 如果我们希望在action中修改root中的state，那么有如下的方式：

   actions: {
     incrementAction({ commit, dispatch, state, rootState, getters, rootGetters }) { }
   }
   复制代码

   

Ⅴ. module的辅助函数

1. 如果辅助函数有三种使用方法：

   • 方式一： 通过完整的模块空间名称来查找；
   • 方式二： 第一个参数传入模块空间名称，后面写上要使用的属性；
   • 方式三： 通过 createNamespacedHelpers 生成一个模块的辅助函数；

2. 来看看在组件页面中使用模块辅助函数的写法：

   • 写法一：

     <template>
       <div>
         <h3>{{ homeCounter }}</h3>
         <h3>{{ doubleHomeCounter }}</h3>
         <button @click="increment"></button>
         <button @click="incrementAction"></button>
       </div>
     </template>
     
     <script>
     import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
     
     export default {
       computed: {
         ...mapState({
           homeCounter: (state) => state.home.homeCounter
         }),
         ...mapGetters({
           doubleHomeCounter: 'home/doubleHomeCounter'
         })
       },
       methods: {
         ...mapMutations({
           increment: 'home/increment'
         }),
         ...mapActions({
           incrementAction: 'home/incrementAction'
         })
       }
     }
     </script>
     复制代码

   • 写法二：

     <template>
       <div>
         <h3>{{ homeCounter }}</h3>
         <h3>{{ doubleHomeCounter }}</h3>
         <button @click="increment"></button>
         <button @click="incrementAction"></button>
       </div>
     </template>
     
     <script>
     import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
     
     export default {
       computed: {
         ...mapState('home', ['homeCounter']),
         ...mapGetters('home', ['doubleHomeCounter'])
       },
       methods: {
         ...mapMutations('home', ['increment']),
         ...mapActions('home', ['incrementAction'])
       }
     }
     </script>
     复制代码

   • 写法三：

     <template>
       <div>
         <h3>{{ homeCounter }}</h3>
         <h3>{{ doubleHomeCounter }}</h3>
         <button @click="increment"></button>
         <button @click="incrementAction"></button>
       </div>
     </template>
     
     <script>
     import { createNamespacedHelpers } from 'vuex'
     
     const { mapState, mapGetters, mapMutations, mapActions } = createNamespacedHelpers('home')
     
     export default {
       computed: {
         ...mapState(['homeCounter']),
         ...mapGetters(['doubleHomeCounter'])
       },
       methods: {
         ...mapMutations(['increment']),
         ...mapActions(['incrementAction'])
       }
     }
     </script>
     复制代码