Vuex中的模块化-Module
Vuex中的模块化-Module
为什么会有模块化？
由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。这句话的意思是，如果把所有的状态都放在state中，当项目变得越来越大的时候，Vuex会变得越来越难以维护
由此，又有了Vuex的模块化
模块化的简单应用
应用
定义两个模块 user 和 setting
user中管理用户的状态 token
setting中管理 应用的名称 name
const store= new Vuex.Store({
modules: {
user: {
state: {
token: '12345'
}
},
setting: {
state: {
name: 'Vuex实例'
}
}
})定义child-b组件，分别显示用户的token和应用名称name
用户token {{ $store.state.user.token }}
网站名称 {{ $store.state.setting.name }}请注意： 此时要获取子模块的状态 需要通过 $store.
state.模块名称.属性名 来获取看着获取有点麻烦，我们可以通过之前学过的getters来改变一下
getters: {
token: state => state.user.token,
name: state => state.setting.name
} 请注意：这个getters是根级别的getters哦
通过mapGetters引用
computed: {
...mapGetters(['token', 'name'])
}模块化中的命名空间
命名空间
namespaced这里注意理解默认情况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间的——这样使得多个模块能够对同一 mutation 或 action 作出响应。
这句话的意思是 刚才的user模块还是setting模块，它的 action、mutation 和 getter 其实并没有区分，都可以直接通过全局的方式调用 如
user: {
state: {
token: '12345'
},
mutations: {
//这里的state表示的是user的state
updateToken (state) {
state.token = 678910
}
}
},通过mapMutations调用
methods: {
...mapMutations(['updateToken'])
}
但是，如果我们想保证内部模块的高封闭性，我们可以采用namespaced来进行设置高封闭性？可以理解成 一家人如果分家了，此时，你的爸妈可以随意的进出分给你的小家，你觉得自己没什么隐私了，我们可以给自己的房门加一道锁（命名空间 namespaced）,你的父母再也不能进出你的小家了
如
user: {
namespaced: true,
state: {
token: '12345'
},
mutations: {
//这里的state表示的是user的state
updateToken (state) {
state.token = 678910
}
}
},使用带命名空间的模块
action/mutations方案1：直接调用-带上模块的属性名路径
test () {
this.$store.dispatch('user/updateToken') // 直接调用方法
}方案2：辅助函数-带上模块的属性名路径
methods: {
...mapMutations(['user/updateToken']),
test () {
this['user/updateToken']()
}
}
方案3： createNamespacedHelpers 创建基于某个命名空间辅助函数
import { mapGetters, createNamespacedHelpers } from 'vuex'
const { mapMutations } = createNamespacedHelpers('user')
小结： 【Vuex中的模块化-Module】若有不懂的地方，请加q群147936127交流或者vx: ltby52119，谢谢~
推荐阅读
- 热闹中的孤独
- JS中的各种宽高度定义及其应用
- 我眼中的佛系经纪人
- 《魔法科高中的劣等生》第26卷（Invasion篇）发售
- Android中的AES加密-下
- 放下心中的偶像包袱吧
- C语言字符函数中的isalnum()和iscntrl()你都知道吗
- C语言浮点函数中的modf和fmod详解
- C语言中的时间函数clock()和time()你都了解吗
- 如何在Mac中的文件选择框中打开系统隐藏文件夹