Vuex之module

由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。

为了解决以上问题,Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。

新建一个js,moduleA:

const state = {  moduleMsg: '这是模块a的数据'}export default {  namespaced: true,  state}

要特别注意的是namespaced: true,一定要加,使其成为带命名空间的模块。否则会报错:

[vuex] module namespace not found in mapState(): modulea

我们在store里面注入模块:

import modulea from './moduleA'
export default new Vuex.Store({  state,  getters,  actions,  mutations,  modules: {    modulea  }})

然后组件使用:

{{this.$store.state.modulea.moduleMsg}}

之前有提过,各个辅助函数都会接收一个参数,所以:

...mapState( 'modulea', ['moduleMsg'])

包括mapAction、mapMutation等都是一样的。

在对于很大的项目把vuex分模块是很有必要的,但是真的不应该盲目的去使用。

(完)

本文分享自微信公众号 - coding个人笔记(gh_2ce38b49dae1),作者:wade

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-12-17

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 模块化之AMD、CMD、UMD、commonJS

    做后台的对模块化的思想很清晰,都是类、继承什么的,而JavaScript早期开始就没有包、类模块的概念,甚至只有函数作用域。

    wade
  • 发布订阅模式与观察者模式

    在开始敲代码之后,设计模式已经听了很多,总有一个感觉,这是很高大上的东西。其实设计模式不只是代码开发在使用,设计模式是一种思想,适用与任何方面。

    wade
  • Web直传OSS

    最近公司需求,前端直接传图片到OSS,一般我们都是传到服务器后台,然后由后台存储。这样其实有一些缺点,OSSAPI上面说:

    wade
  • 基于flux和observer相结合的思想的数据管理器

    Redux和MobX是前端领域最前沿的两个状态管理library,前者遵循Flux思想,后者独树一帜,不过可以认为继承了observer思想。在具体本文的阐述前...

    IMWeb前端团队
  • 基于flux和observer相结合的思想的数据管理器

    Redux和MobX是前端领域最前沿的两个状态管理library,前者遵循Flux思想,后者独树一帜,不过可以认为继承了observer思想。在具体本文的阐述前...

    IMWeb前端团队
  • 揭秘“食鼠猫”病毒背后的灰色产业链

    “食鼠猫”样本主要通过虚假色情播放器等流氓软件的捆绑安装进行传播,感染主机会被强制安装多款推广软件,病毒通过篡改浏览器快捷方式、Hosts文件等方式劫持用户电脑...

    FB客服
  • JAVA9模块化详解(二)——模块的使用

    各自的模块可以在模块工件中定义,要么就是在编译期或者运行期嵌入的环境中。为了提供可靠的配置和强健的封装性,在分块的模块系统中利用他们,必须确定它们的位置,然后...

    小忽悠
  • JAVA9模块化详解(二)——模块的使用

    各自的模块可以在模块工件中定义,要么就是在编译期或者运行期嵌入的环境中。为了提供可靠的配置和强健的封装性,在分块的模块系统中利用他们,必须确定它们的位置,然后决...

    小忽悠
  • 大白话理解Vuex

    当我们在项目中使用props来处理数据共享关系时,多层级的组件之间数据传递真的是很繁琐,费劲且不易维护,vuex的出现,就可以完美帮我们解决这个问题。

    ConardLi
  • Vuex从入门到精通(一)

    状态管理 状态的初始化 状态管理,我们应该并不陌生。 举个例子,超市里新进了一批商品,管理员给这些商品分类,建立索引,然后按照顺序放入货架的过程就是最简单的状态...

    lonelydawn

扫码关注云+社区

领取腾讯云代金券