前言

  在Vue中State使用是单一状态树结构,应该的所有的状态都放在state里面,如果项目比较复杂,那state是一个很大的对象,store对象也将对变得非常大,难于管理。于是Vuex中就存在了另外一个核心概念 modules。本文就来总结 modules 相关知识点。

正文

1 、什么是模块Modules

  Vuex允许我们将store分割成模块(Module), 而每个模块拥有自己的state、getters、mutation、action等,甚至是嵌套子模块——从上至下进行同样方式的分割。

    const moduleA = {
state: () => ({ ... }),
mutations: { ... },
actions: { ... },
getters: { ... }
}
const moduleB = {
state: () => ({ ... }),
mutations: { ... },
actions: { ... }
}
const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
})
this.store.state.a // -> 获得moduleA 的状态
this.store.state.b // -> 获得moduleB 的状态

  内部state,模块内部的state是局部的,也就是模块私有的,

  内部getter,mutation,action 仍然注册在全局命名空间内,这样使得多个模块能够对同一 mutation 或 action 作出响应。

  2、模块内部参数问题

  对于模块内部的 mutation 和 getter,接收的第一个参数是模块的局部状态对象 state。

  对于模块内部的 action,局部状态通过 context.state 暴露出来,根节点状态则为 context.rootState:

  对于模块内部的 getter,根节点状态会作为第三个参数暴露出来:

    const moduleA = {
state: () => ({
count:"",
}),
actions: {
//这里的state为局部状态,rootState为根节点状态
incrementIfOddOnRootSum ({ state, commit, rootState }) {
if ((state.count + rootState.count) % 2 === 1) {
commit('increment')
}
}
}
mutations: {
// 这里的 `state` 对象是模块的局部状态
increment (state) {
state.count++
}
},
getters: {
//这里的state为局部状态,rootState为根节点状态
doubleCount (state) {
return state.count * 2
},
sumWithRootCount (state, getters, rootState) {
return state.count + rootState.count
}
}
}

  3、模块命名空间问题

  (1)namespaced: true 使模块成为带命名空间的模块

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

const store = new Vuex.Store({
modules: {
account: {
namespaced: true,
// 模块内容(module assets) 在使用模块内容(module assets)时不需要在同一模块内额外添加空间名前缀。
state: () => ({}), // 模块内的状态已经是嵌套的了,使用 `namespaced` 属性不会对其产生影响
getters: {
isAdmin() {}, // ->使用: getters['account/isAdmin'],
// 你可以使用 getter 的第四个参数来调用
someGetter(state, getters, rootState, rootGetters) {
// getters.isAdmin
// rootGetters.someOtherGetter
},
},
actions: {
login() {}, // ->使用: dispatch('account/login')
// 你可以使用 action 的第四个参数来调用
//若需要在全局命名空间内分发 action 或提交 mutation,将 { root: true } 作为第三参数传给 dispatch 或 commit 即可
someAction({ dispatch, commit, getters, rootGetters }) {
// getters.isAdmin;
// rootGetters.someGetter;
// dispatch("someOtherAction");
// dispatch("someOtherAction", null, { root: true });
// commit("someMutation");
// commit("someMutation", null, { root: true });
},
someOtherAction(ctx, payload) {},
// 若需要在带命名空间的模块注册全局 action,你可添加 root: true,并将这个 action 的定义放在函数 handler 中。
otherAction: {
root: true,
handler(namespacedContext, payload) {}, // -> 'someAction'
},
},
mutations: {
login() {}, // ->使用: commit('account/login')
},
// 嵌套模块
modules: {
// 继承父模块的命名空间
myPage: {
state: () => ({}),
getters: {
profile() {}, // -> 使用:getters['account/profile']
},
}, // 进一步嵌套命名空间
posts: {
namespaced: true, state: () => ({}),
getters: {
popular() {}, // -> 使用:getters['account/posts/popular']
},
},
},
},
},
});

  (2)带命名空间的绑定函数的使用

  当使用 mapState, mapGetters, mapActions 和 mapMutations 这些函数来绑定带命名空间的模块时,写起来可能比较繁琐:

     computed: {
...mapState({
a: state => state.some.nested.module.a,
b: state => state.some.nested.module.b
})
},
methods: {
...mapActions([
'some/nested/module/foo', // -> this['some/nested/module/foo']()
'some/nested/module/bar' // -> this['some/nested/module/bar']()
])
}

  createNamespacedHelpers 创建基于某个命名空间辅助函数,它返回一个对象,对象里有新的绑定在给定命名空间值上的组件绑定辅助函数。

        import { createNamespacedHelpers } from 'vuex'
const { mapState, mapActions } = createNamespacedHelpers('some/nested/module')
export default {
computed: {
// 在 `some/nested/module` 中查找
...mapState({
a: state => state.a,
b: state => state.b
})
},
methods: {
// 在 `some/nested/module` 中查找
...mapActions([
'foo',
'bar'
])
}
}

  4、模块动态注册

  在 store 创建之后,你可以使用 store.registerModule 方法注册模块

        import Vuex from 'vuex'
const store = new Vuex.Store({ /* 选项 */ })
// 注册模块 `myModule`
store.registerModule('myModule', {
// ...
})
// 注册嵌套模块 `nested/myModule`
store.registerModule(['nested', 'myModule'], {
// ...
})

  之后就可以通过 store.state.myModule 和 store.state.nested.myModule 访问模块的状态。

  也可以使用 store.unregisterModule(moduleName) 来动态卸载模块。注意,你不能使用此方法卸载静态模块(即创建 store 时声明的模块)。

  可以通过 store.hasModule(moduleName) 方法检查该模块是否已经被注册到 store。

写在最后

  以上就是本文的全部内容,希望给读者带来些许的帮助和进步,方便的话点个关注,小白的成长之路会持续更新一些工作中常见的问题和技术点。

 

vue--vuex 中 Modules 详解的更多相关文章

  1. Vue组件通信方式全面详解

    vue组件通信方式全面详解 众所周知,Vue主要思想就是组件化开发.因为,在实际的项目开发中,肯定会以组件的开发模式进行.形如页面和页面之间需要通信一样,Vue 组件和组件之间肯定也需要互通有无.共享 ...

  2. Vue.js 数据绑定语法详解

    Vue.js 数据绑定语法详解 一.总结 一句话总结:Vue.js 的模板是基于 DOM 实现的.这意味着所有的 Vue.js 模板都是可解析的有效的 HTML,且通过一些特殊的特性做了增强.Vue ...

  3. vue2.0中router-link详解

    vue2.0中router-link详解:https://blog.csdn.net/lhjuejiang/article/details/81082090 在vue2.0中,原来的v-link指令已 ...

  4. winxp计算机管理中服务详解

    winxp计算机管理中服务详解01 http://blog.sina.com.cn/s/blog_60f923b50100efy9.html http://blog.sina.com.cn/s/blo ...

  5. cocos2dx常见的46中+22中动作详解

    cocos2dx常见的46中+22中动作详解 分类: iOS2013-10-16 00:44 1429人阅读 评论(0) 收藏 举报 bool HelloWorld::init(){    ///// ...

  6. Android中Context详解 ---- 你所不知道的Context

    转自:http://blog.csdn.net/qinjuning/article/details/7310620Android中Context详解 ---- 你所不知道的Context 大家好,  ...

  7. iOS中-Qutarz2D详解及使用

    在iOS中Qutarz2D 详解及使用 (一)初识 介绍 Quartz 2D是二维绘图引擎. 能完成的工作有: 绘制图形 : 线条\三角形\矩形\圆\弧等 绘制文字 绘制\生成图片(图像) 读取\生成 ...

  8. 【转】declare-styleable的使用(自定义控件) 以及declare-styleable中format详解

    原文网址:http://www.cnblogs.com/622698abc/p/3348692.html declare-styleable是给自定义控件添加自定义属性用的 1.首先,先写attrs. ...

  9. Python中dict详解

    from:http://www.cnblogs.com/yangyongzhi/archive/2012/09/17/2688326.html Python中dict详解 python3.0以上,pr ...

随机推荐

  1. CVE-2015-1427(Groovy 沙盒绕过 && 代码执行漏洞)

    1.vulhub环境搭建 https://blog.csdn.net/qq_36374896/article/details/84102101 2.启动docker环境 cd vulhub-maste ...

  2. WIRESHARK 提取百度云客户端中的下载地址

    序言:近两年感觉云盘是越来越不行了,什么115,360,华为,新浪一些网盘纷纷关门,现在手里能用的就只剩下一个百度云坚挺着.可那速度,简直感人,好吧,没钱冲VIP,就去找了一个破解版,用了一年,爽得飞 ...

  3. uniapp小程序图片前端压缩上传

    目录 1,前言 2,实现代码 1,前言 这次项目中做了一个图片上传,要求是大于2MB的就压缩成2MB一下的再上传,我这边利用了uniapp的文件接口,使用canvas做了一个压缩上传的功能,目前已上线 ...

  4. MySQL 根据JSON类型的字段进行过滤数据的方式

    第一种方式:JSON_CONTAINS 函数 : 执行相等形式的比较 注意:值的类型一定要相同,不然会报错 文档地址:https://dev.mysql.com/doc/refman/8.0/en/j ...

  5. kafka中的broker 是干什么的?

     broker 是消息的代理,Producers往Brokers里面的指定Topic中写消息,Consumers从Brokers里面拉取指定Topic的消息,然后进行业务处理,broker在中间起到一 ...

  6. 什么是 bean 装配?

    装配,或 bean 装配是指在 Spring 容器中把 bean 组装到一起,前提是容器需要 知道 bean 的依赖关系,如何通过依赖注入来把它们装配到一起.

  7. Redis 集群会有写操作丢失吗?为什么?

    Redis 并不能保证数据的强一致性,这意味这在实际中集群在特定的条件下可能会丢失写操作.

  8. Zookeeper 的典型应用场景?

    Zookeeper 是一个典型的发布/订阅模式的分布式数据管理与协调框架,开发人员 可以使用它来进行分布式数据的发布和订阅. 通过对 Zookeeper 中丰富的数据节点进行交叉使用,配合 Watch ...

  9. 图灵机器人 V1 和 V2 接入方法

    API1.0使用方法: import requests import json import yuyinhecheng as hc def Tuling(words):     Tuling_API_ ...

  10. USB2.0接口EMC设计标准电路