深入理解Vuex 模块化(module)
一、为什么需要模块化
前面我们讲到的例子都在一个状态树里进行,当一个项目比较大时,所有的状态都集中在一起会得到一个比较大的对象,进而显得臃肿,难以维护。为了解决这个问题,Vuex允许我们将store分割成模块(module),每个module有自己的state,mutation,action,getter,甚至还可以往下嵌套模块,下面我们看一个典型的模块化例子
const moduleA = { state: {....}, mutations: {....}, actions: {....}, getters: {....} } const moduleB = { state: {....}, mutations: {....}, actions: {....}, getters: {....} } const store = new Vuex.Store({ modules: { a: moduleA, b: moduleB } }) store.state.a // moduleA的状态 store.state.b // moduleB的状态
二、模块的局部状态
模块内部的mutation和getter,接收的第一参数(state)是模块的局部状态对象,rootState
const moduleA = { state: { count: 0}, mutations: { increment (state) { // state是模块的局部状态,也就是上面的state state.count++ } }, getters: { doubleCount (state, getters, rootState) { // 参数 state为当前局部状态,rootState为根节点状态 return state.count * 2 } }, actions: { incremtnIfOddRootSum ( { state, commit, rootState } ) { // 参数 state为当前局部状态,rootState为根节点状态 if ((state.cont + rootState.count) % 2 === 1) { commit('increment') } } } }
三、命名空间(这里一定要看,不然有些时候会被坑)
上面所有的例子中,模块内部的action、mutation、getter是注册在全局命名空间的,如果你在moduleA和moduleB里分别声明了命名相同的action或者mutation或者getter(叫some),当你使用store.commit('some'),A和B模块会同时响应。所以,如果你希望你的模块更加自包含和提高可重用性,你可以添加namespaced: true的方式,使其成为命名空间模块。当模块被注册后,它的所有getter,action,mutation都会自动根据模块注册的路径调用整个命名,例如:
const store = new Vuex.Store({ modules: { account: { namespaced: true, state: {...}, // 模块内的状态已经是嵌套的,namespaced不会有影响 getters: { // 每一条注释为调用方法 isAdmin () { ... } // getters['account/isAdmin'] }, actions: { login () {...} // dispatch('account/login') }, mutations: { login () {...} // commit('account/login') }, modules: { // 继承父模块的命名空间 myPage : { state: {...}, getters: { profile () {...} // getters['account/profile'] } }, posts: { // 进一步嵌套命名空间 namespaced: true, getters: { popular () {...} // getters['account/posts/popular'] } } } } } })
启用了命名空间的getter和action会收到局部化的getter,dispatch和commit。你在使用模块内容时不需要再同一模块内添加空间名前缀,更改namespaced属性后不需要修改模块内的代码。
四、在命名空间模块内访问全局内容(Global Assets)
如果你希望使用全局state和getter,roorState和rootGetter会作为第三和第四参数传入getter,也会通过context对象的属性传入action若需要在全局命名空间内分发action或者提交mutation,将{ root: true }作为第三参数传给dispatch或commit即可。
modules: { foo: { namespaced: true, getters: { // 在这个被命名的模块里,getters被局部化了 // 你可以使用getter的第四个参数来调用 'rootGetters' someGetter (state, getters, rootSate, rootGetters) { getters.someOtherGetter // -> 局部的getter, ‘foo/someOtherGetter' rootGetters.someOtherGetter // -> 全局getter, 'someOtherGetter' } }, actions: { // 在这个模块里,dispatch和commit也被局部化了 // 他们可以接受root属性以访问跟dispatch和commit smoeActino ({dispatch, commit, getters, rootGetters }) { getters.someGetter // 'foo/someGetter' rootGetters.someGetter // 'someGetter' dispatch('someOtherAction') // 'foo/someOtherAction' dispatch('someOtherAction', null, {root: true}) // => ‘someOtherAction' commit('someMutation') // 'foo/someMutation' commit('someMutation', null, { root: true }) // someMutation } } } }
五、带命名空间的绑定函数
前面说过,带了命名空间后,调用时必须要写上命名空间,但是这样就比较繁琐,尤其涉及到多层嵌套时(当然开发中别嵌套太多,会晕。。)
下面我们看下一般写法
computed: { ...mapState({ a: state => state.some.nested.module.a, b: state => state.some.nested.module.b }), methods: { ...mapActions([ 'some/nested/module/foo', 'some/nested/module/bar' ]) } }
对于这种情况,你可以将模块的命名空间作为第一个参数传递给上述函数,这样所有的绑定会自动将该模块作为上下文。简化写就是
computed: { ...mapStates('some/nested/module', { a: state => state.a, b: state => state.b }) }, methods: { ...mapActions('some/nested/module',[ 'foo', 'bar' ]) }
六、模块重用
有时我们可能创建一个模块的多个实例,例如:
- 创建多个store,他们共用一个模块
- 在一个store中多次注册同一个模块
如果我们使用一个纯对象来声明模块的状态,那么这个状态对象会通过引用被共享,导致数据互相污染。
实际上Vue组件内data是同样的问题,因此解决办法也是一样的,使用一个函数来声明模块状态(2.3.0+支持)
const MyModule = { state () { return { foo: 'far' } } }
七、总结
到这里模块化(module)的内容就已经讲完了,本次主要讲解了module出现的原因,使用方法,全局和局部namespaced模块命名空间,局部访问全局内容,map函数带有命名空间的绑定函数和模块的重用。
引用
https://vuex.vuejs.org Vuex官方文档
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- 细数那些在2017年被黑客滥用的系统管理工具和协议
- Compass: 在你的应用中集成搜索功能
- 列表选择Spinner
- 巧用CSS3 :target 伪类制作Dropdown下拉菜单(无JS)
- 开源的虚拟机软件 VirtualBox v1.5.2
- Farseer:一个用于Silverlight和XNA的开源物理引擎
- Visual Studio 2008 debug的时候发生郁闷的错误ContextSwitchDeadlock was detected
- LINQ TO XML
- 不被未来折叠掉:AI时代下的思考
- Google 分析的基准化测试
- WebFont 三宗罪之一:WebFont 与 FOUT
- 探究基于声明的身份标识
- 深化“互联网+先进制造业”发展工业互联网的系列解读二:打造平台体系
- WebFont 三宗罪之二:吹毛求疵的WebFont 渲染差异
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Android编程实现禁止StatusBar下拉的方法
- Android自定义view圆并随手指移动
- Android仿微信发送语音消息的功能及示例代码
- 详解Android studio ndk配置cmake开发native C
- Android编程实现禁止状态栏下拉的方法详解
- Android进度条ProgressBar的实现代码
- Android画画板的制作方法
- Android实现bitmap指定区域滑动截取功能
- Android开发实现应用层面屏蔽状态栏的方法小结
- Android实现实时搜索框功能
- 浅谈Android轻量级的数据缓存框架RxCache
- Android开发实现消除屏幕锁的方法
- Android中js和原生交互的示例代码
- 浅谈android获取设备唯一标识完美解决方案
- Android开发实现长按返回键弹出关机框功能