深入理解Vuex 模块化(module)


Posted in Javascript onSeptember 26, 2017

一、为什么需要模块化

前面我们讲到的例子都在一个状态树里进行,当一个项目比较大时,所有的状态都集中在一起会得到一个比较大的对象,进而显得臃肿,难以维护。为了解决这个问题,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官方文档

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一个加密JavaScript的开源工具PACKER2.0.2
Nov 04 Javascript
jQuery温习篇 强大的JQuery选择器
Apr 24 Javascript
Ext修改GridPanel数据和字体颜色、css属性等
Jun 13 Javascript
jQuery为DOM动态追加事件的方法
Feb 16 Javascript
JS模拟超市简易收银台小程序代码解析
Aug 18 Javascript
基于node.js实现微信支付退款功能
Dec 19 Javascript
jQuery实现炫丽的3d旋转星空效果
Jul 04 jQuery
vue-lazyload使用总结(推荐)
Nov 01 Javascript
使用 Element UI Table 的 slot-scope方法
Oct 10 Javascript
JS控制下拉列表左右选择实例代码
May 08 Javascript
基于vue--key值的特殊用处详解
Jul 31 Javascript
详解Typescript里的This的使用方法
Jan 08 Javascript
JavaScript实现的仿新浪微博原生态输入字数即时检查功能【兼容IE6】
Sep 26 #Javascript
JavaScript实现离开页面前提示功能【附jQuery实现方法】
Sep 26 #jQuery
Vue from-validate 表单验证的示例代码
Sep 26 #Javascript
微信小程序之蓝牙的链接
Sep 26 #Javascript
jQuery EasyUI Layout实现tabs标签的实例
Sep 26 #jQuery
jQuery EasyUI开发技巧总结
Sep 26 #jQuery
jQuery 开发之EasyUI 添加数据的实例
Sep 26 #jQuery
You might like
关于PHP的curl开启问题探讨
2014/04/08 PHP
smarty模板判断数组为空的方法
2015/06/10 PHP
浅谈thinkphp5 instance 的简单实现
2017/07/30 PHP
Laravel 实现Controller向blade前台模板赋值的四种方式小结
2019/10/22 PHP
Juqery Html(),append()等方法的Bug解决方法
2010/12/13 Javascript
浅析document.createDocumentFragment()与js效率
2013/07/08 Javascript
javascript中解析四则运算表达式的算法和示例
2014/08/11 Javascript
javascript学习笔记(八)正则表达式
2014/10/08 Javascript
jQuery实现仿美橙互联两级导航菜单的方法
2015/03/09 Javascript
浅谈JavaScript中指针和地址
2015/07/26 Javascript
JavaScript实现ASC转汉字及汉字转ASC的方法
2016/01/23 Javascript
jQuery多级联动下拉插件chained用法示例
2016/08/20 Javascript
Vue-cli proxyTable 解决开发环境的跨域问题详解
2017/05/18 Javascript
VUE元素的隐藏和显示(v-show指令)
2017/06/23 Javascript
Windows下Node.js安装及环境配置方法
2017/09/18 Javascript
angularjs实现猜大小功能
2017/10/23 Javascript
基于mpvue搭建微信小程序项目框架的教程详解
2019/04/10 Javascript
mpvue性能优化实战技巧(小结)
2019/04/17 Javascript
基于Vue SEO的四种方案(小结)
2019/07/01 Javascript
javascript的hashCode函数实现代码小结
2020/08/11 Javascript
vue使用element-ui实现表单验证
2020/12/13 Vue.js
[02:35]DOTA2英雄基础教程 狙击手
2014/01/14 DOTA
Python Web框架Tornado运行和部署
2020/10/19 Python
python中学习K-Means和图片压缩
2017/11/20 Python
对Python中range()函数和list的比较
2018/04/19 Python
对python捕获ctrl+c手工中断程序的两种方法详解
2018/12/26 Python
详解Python字符串切片
2019/05/20 Python
python脚本开机自启的实现方法
2019/06/28 Python
浅谈python3中input输入的使用
2019/08/02 Python
加拿大便宜的隐形眼镜商店:Clearly
2016/09/15 全球购物
Brasty波兰:香水、化妆品、手表网上商店
2019/04/15 全球购物
慰问敬老院活动总结
2014/04/26 职场文书
12岁生日演讲稿
2014/05/14 职场文书
软件测试专业推荐信
2014/09/18 职场文书
2015年酒店年度工作总结
2015/05/23 职场文书
matplotlib画混淆矩阵与正确率曲线的实例代码
2021/06/01 Python