携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第11天,点击查看活动详情
Ⅲ. module的命名空间
-
默认情况下,模块内部的action和mutation仍然是注册在全局的命名空间中的:
- 这样使得多个模块能够对同一个 action 或 mutation 作出响应;
- Getter 同样也默认注册在全局命名空间;
-
如果我们希望模块具有更高的封装度和复用性,可以添加 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 复制代码
-
-
当设置了命名空间的时候,在页面中获取getters里面的内容的时候就需要使用
$store.getters['模块空间名/getters方法名']
:<template> <div> <h3>{{ $store.getters['home/doubleHomeCounter'] }}</h3> </div> </template> 复制代码
-
并且使用模块下面的mutations和actions的话也需要像getters这样的写法:
- mutations:
this.$store.commit('home/mutations名')
- actions:
this.$store.dispatch('home/actions名')
- mutations:
Ⅳ. module修改或派发根组件
-
如果我们希望在getters中修改root中的state,那么有如下的方式:
getters: { doubleHomeCounter(**state, getters, rootState, rootGetters**) { } } 复制代码
-
如果我们希望在action中修改root中的state,那么有如下的方式:
actions: { incrementAction({ commit, dispatch, state, rootState, getters, rootGetters }) { } } 复制代码
Ⅴ. module的辅助函数
-
如果辅助函数有三种使用方法:
- 方式一: 通过完整的模块空间名称来查找;
- 方式二: 第一个参数传入模块空间名称,后面写上要使用的属性;
- 方式三: 通过 createNamespacedHelpers 生成一个模块的辅助函数;
-
来看看在组件页面中使用模块辅助函数的写法:
-
写法一:
<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> 复制代码
-