[Vuex系列] - Module的用法(终篇)
于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。为了解决以上问题,Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割:
如何使用module
在store文件夹下新建modules文件夹,并在下面建立moduleA.js和moduleB.js文件用来存放vuex的modules模块
moduleA.js文件内容如下:
const state = {stateA: 'A'
}const mutations = {showA (state) {return state.stateA}
}const actions = {showAAction (context) {context.commit('showA')}
}const getters = {getA (state) {return state.stateA}
}export default {state, mutations, actions, getters}
moduleB.js文件内容如下:
const state = {stateB: 'B'
}const mutations = {showA (state) {return state.stateB}
}const actions = {showAAction (context) {context.commit('showB')}
}const getters = {getA (state) {return state.stateB}
}export default {state, mutations, actions, getters}
store.js 文件内容如下:
import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'
import getters from './getters'
import actions from './actions'
import moduleA from './modules/moduleA'
import moduleB from './modules/moduleB'Vue.use(Vuex)const store = new Vuex.Store({state,mutations,getters,actions,modules: {moduleA,moduleB}export default store
在组件中使用
<template><div class="modules"><h1>{{moduleA}} --- {{moduleB}}</h1></div>
</template><script>
import { mapState } from 'vuex'export default {data () {return {}},computed: {...mapState({moduleA: state => state.moduleA.stateA,moduleB: state => state.moduleB.stateB})}
}
</script>
模块动态注册
在 store 创建之后,你可以使用 store.registerModule 方法注册模块:
// 注册模块 `myModule`
store.registerModule('myModule', {// ...
})
// 注册嵌套模块 `nested/myModule`
store.registerModule(['nested', 'myModule'], {// ...
})
之后就可以通过 store.state.myModule 和 store.state.nested.myModule 访问模块的状态。模块动态注册功能使得其他 Vue 插件可以通过在 store 中附加新模块的方式来使用 Vuex 管理状态。例如,vuex-router-sync 插件就是通过动态注册模块将 vue-router 和 vuex 结合在一起,实现应用的路由状态管理。你也可以使用 store.unregisterModule(moduleName) 来动态卸载模块。注意,你不能使用此方法卸载静态模块(即创建 store 时声明的模块)。
转载于:https://www.cnblogs.com/wangshucheng/p/vuex-006.html
[Vuex系列] - Module的用法(终篇)相关推荐
- amd860k能装黑苹果吗_黑苹果配置 篇六:黑苹果硬件选购指南之终篇--2019年8月
黑苹果配置 篇六:黑苹果硬件选购指南之终篇--2019年8月 2019-08-17 17:31:38 26点赞 238收藏 33评论 你是AMD Yes党?还是intel和NVIDIA的忠实簇拥呢?最 ...
- 《父亲家书》终篇:来京探望儿子之后
文飞: 来信收到,家中一切均好,勿念. 自京返汴(注1)虽已三十多天,但你妈妈激动之情,近几天才有所平稳.但得你妈妈影响最大的,是你母亲在气质上影响不小,处事大方多了,这是一个可喜的变化.看来,让她出 ...
- python独立网站教程_python从零到独立建设网站系列教程之基础知识篇(二)
python从零到独立建设网站系列教程之基础知识篇(二)python的安装在Windows上安装python点击Download链接 然后就是按导航走点击确认,需要注意的是要把python加入到系统变 ...
- Android当中的MVP模式(七)终篇---关于对MVP模式中代码臃肿
个人博客:CODE FRAMER BIGZ MVP系列文章配套DEMO Android 当中的 MVP 模式(一)基本概念 Android 当中的 MVP 模式(二)封装 Android 当中的 MV ...
- python中item是什么意思中文-Python中items()系列函数的用法详解
这篇文章主要介绍了Python中dictionary items()系列函数的用法,很实用的函数,需要的朋友可以参考下 本文实例讲述了Python中dictionary items()系列函数的用法, ...
- 《浅谈整车SOA架构》终篇:整车SOA系统设计
<浅谈整车SOA架构>终篇:整车SOA系统设计 参考链接: 1.https://zhuanlan.zhihu.com/p/330973653 2.<浅谈整车SOA架构>第1篇: ...
- c语言 字符串转运算符,快速上手系列-C语言之基础篇(二)数据类型与运算符...
在上一篇文章<快速上手系列-C语言之基础篇(一)>中写了关于C语言的程序结构,关键字及控制语句.本篇主要写写C语言中数据类型,以及运算符相关方面的知识. 一.变量与常量 1.常量:在程序运 ...
- 从0开始学c语言-终篇41-练习、学习分享
CSDN话题挑战赛第2期 参赛话题:学习笔记 终于,来到了终篇,我坚持做到了!每天一篇博客记录自己的学习(虽然中间有两天去干农活而断更了)!啊呜呜呜呜~激动! 但是,这不会是我的终点,这是新的起点.之 ...
- JUnit5学习之八:综合进阶(终篇)
欢迎访问我的GitHub 这里分类和汇总了欣宸的全部原创(含配套源码):https://github.com/zq2599/blog_demos 关于<JUnit5学习>系列 <JU ...
最新文章
- 在java中实现日期类型和字符串类型的转换大全(Date String Timestamp Datetime)
- Python操作Kafka爬坑
- windbg-!address、!vadump、!vprot(读取内存状态)
- Spring框架教程集合
- 底层主播生存录:玩不好算法,去不了塔尖
- 元旦和春节将至,抢票神器助君早日回家
- LeetCode -- Perfect Squares
- 基于JWT前后端token认证
- 数据集:男女身高体重(二维)
- 【TM1640】STM32 TM1640芯片驱动程序
- python 菜鸟 3.0-终于清楚python菜鸟入门教程
- python爬虫——彼岸图网
- python字符串怎么加绝对值_每日一练 | Python绝对值有哪些实例?
- python大神年薪_我程序员年薪 80 万被亲戚鄙视不如在二本教书的博士生?
- 八进制数转十进制计算机计算器,八进制转十进制计算器
- 海龟画图 python太阳花_python海龟绘图实例教程
- 教师对php作品评语通用,期末教师给学生的评语
- qgg包-续2-大数据集教程
- 营销思维篇:透漏22个我赚钱的小秘密
- web test IBM Page Detailer / IBM Rational Performance Tester / Web Page Performa