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 }})

然后组件使用：

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

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

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

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

欢迎关注Coding个人笔记公众号

转载于:https://juejin.im/post/5c54fe29e51d457fc75f7076

Vuex之module相关推荐

VUEX封装module
VUEX封装module 目录结构 store/index.js,配置,以及导入两种方式 import Vue from 'vue' import Vuex from 'vuex' import m ...
vuex结合php,Vuex模块化(module)实例详解
本文主要和大家介绍Vuex 模块化(module),小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助到大家. 一.为什么需要模块化前面我们讲到的例子都在一个状态树里进行,当一个项目比较 ...
Vue 教程第十七篇—— Vuex 之 module
module 由于使用单一状态树,应用的所有状态会集中到一个比较大的对象.当应用变得非常复杂时,store 对象就有可能变得相当臃肿. 为了解决以上问题,Vuex 允许我们将 store 分割成模块( ...
[Vuex系列] - Module的用法（终篇）
于使用单一状态树,应用的所有状态会集中到一个比较大的对象.当应用变得非常复杂时,store 对象就有可能变得相当臃肿.为了解决以上问题,Vuex 允许我们将 store 分割成模块(module).每 ...
Vuex 2.0 源码分析
作者:滴滴公共前端团队 - 黄轶大家好,我叫黄轶,来自滴滴公共前端团队,我们团队最近写了一本书 --<Vue.js 权威指南>,内容丰富,由浅入深.不过有一些同学反馈说缺少 Vuex 的 ...
vuex的计算属性_vuex 是什么？有哪几种属性？
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式. 有 5 种,分别是 state.getter.mutation.action.module vuex 的 store 是什么? vue ...
层次和约束：项目中使用vuex的3条优化方案
问题描述使用vuex的store的过程中,发现了一些不是很优雅的地方: store层module太多,找state.getter.mutation.action对应的module比较慢. 组件里面m ...
vuex 源码分析_Vuex框架原理与源码分析
Vuex是一个专为Vue服务,用于管理页面数据状态.提供统一数据操作的生态系统.它集中于MVC模式中的Model层,规定所有的数据操作必须通过 action - mutation - state ch ...
使用vuejs 2.x (不是nuxt) 做个demo: 使用 vuex, router ( store, action , mutation)
使用命令创建项目根据图片提示选择需要的内容,选择vuex router 按空格进行多选 vue create vuex1 cd vuex1 yarn serve 假设,我们有两个页面: " ...

Vuex之module

Vuex之module相关推荐

最新文章

热门文章