Vuex 模块化与项目实例 (2.0)
Vuex 强调使用单一状态树,即在一个项目里只有一个 store,这个 store 集中管理了项目中所有的数据以及对数据的操作行为。但是这样带来的问题是 store 可能会非常臃肿庞大不易维护,所以就需要对状态树进行模块化的拆分。
该项目主要包括 banner、feeds、profile 三个部分。其中 feeds 模块最复杂,需要对数据列表进行处理,如果单条数据中是图片:1张按照屏幕宽展示;2张各占50%;3张以上采用九宫格形式展示;如果单条数据是视频,则显示播放按钮,播放一条视频时,其他视频暂停。
由于该项目数据、交互较多,我们使用 Vuex 对数据进行托管,只在 Vue 组件中保留最基本的操作。
如果不使用 Vuex,许多数据流需要通过 props 的方便向下传递,十分不便,尤其是一些跨组件的操作更加困难。使用 Vuex 后就可以将数据与操作保留在 store 中,每个组件都能轻松调用。
本项目中除了根 store 以外,还通过 module 将各组件的 store 分开管理,还不了解的同学可以往下看。
Module
首先介绍下基本的组件化规则:你可以根据项目组件的划分来拆分 store,每个模块里管理着当前组件的状态以及行为,最后将这些模块在根 store 进行组合。
const moduleA = {
state: { ... },
getters: { ... }
mutations: { ... }
}; const moduleB = {
state: { ... },
getters: { ... },
mutations: { ... },
actions: { ... }
}; const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
}); console.log(store.state.a); // moduleA 的 state
接下来看 Vuex 核心在模块化后的使用注意事项。
请参考上文 Vuex 核心知识 (2.0)
State
在 Vuex 模块化中,state 是唯一会根据组合时模块的别名来添加层级的,后面的 getters、mutations 以及 actions 都是直接合并在 store 下。
例如,访问模块 a 中的 state,要通过 store.state.a,访问根 store 上申明的 state,依然是通过 store.state.xxx 直接访问。
const moduleA = {
state: {
maState: 'A'
}
}; const moduleB = {
state: {
mbState: 'B'
}
}; const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
},
state: {
rtState: 'Root'
}
}); console.log(store.state.a.maState); // A
console.log(store.state.b.mbState); // B
console.log(store.state.rtState); // Root
Getters
与 state 不同的是,不同模块的 getters 会直接合并在 store.getters 下
const moduleA = {
state: {
count: 1
},
getters: {
maGetter(state, getters, rootState) {
return state.count + rootState.b.count;
}
}
}; const moduleB = {
state: {
count: 2
},
getters: {
mbGetter() {
return 'Hello Vuex';
}
}
}; const store = {
modules: {
a: moduleA,
b: moduleB
}
}; console.log(store.getters.maGetter); //
console.log(store.getters.mbGetter); // Hello Vuex
在上文我们介绍过 getters 的回调函数所接收的前两个参数,模块化后需要用到第三个参数——rootState。参数: 1. state,模块中的 state 仅为模块自身中的 state;2. getters,等同于 store.getters;3. rootState,全局 state。
通过 rootState,模块中的 getters 就可以引用别的模块中的 state 了,十分方便。
注意:由于 getters 不区分模块,所以不同模块中的 getters 如果重名,Vuex 会报出 'duplicate getter key: [重复的getter名]' 错误。
Mutations
mutations 与 getters 类似,不同模块的 mutation 均可以通过 store.commit 直接触发。
const moduleA = {
state: {
count: 1
},
mutations: {
sayCountA(state) {
console.log('Module A count: ', state.count);
}
}
}; const moduleB = {
state: {
count: 2
},
mutations: {
sayCountB(state) {
console.log('Module B count: ', state.count);
}
}
}; const store = {
modules: {
a: moduleA,
b: moduleB
}
}; store.commit('sayCountA'); // Module A count: 1
store.commit('sayCountB'); // Module B count: 2
mutation 的回调函数中只接收唯一的参数——当前模块的 state。如果不同模块中有同名的 mutation,Vuex 不会报错,通过 store.commit 调用,会依次触发所有同名 mutation。
Actions
与 mutations 类似,不同模块的 actions 均可以通过 store.dispatch 直接触发。
const moduleA = {
state: {
count: 1
},
mutations: {
sayCountA(state) {
console.log('Module A count: ', state.count);
}
},
actions: {
maAction(context) {
context.dispatch('mbAction');
}
}
}; const moduleB = {
state: {
count: 2
},
mutations: {
sayCountB(state, num) {
console.log('Module B count: ', state.count+num);
}
},
action: {
mbAction({ commit, rootState }) {
commit('sayCountA');
commit('sayCountB', rootState.a.count);
}
}
}; const store = {
modules: {
a: moduleA,
b: moduleB
}
}; store.dispatch('maAction'); // Module A count: 1、Module B count: 3
从上例可以看出,action 的回调函数接收一个 context 上下文参数,context 包含:1. state、2. rootState、3. getters、4. mutations、5. actions 五个属性,为了简便可以在参数中解构。
在 action 中可以通过 context.commit 跨模块调用 mutation,同时一个模块的 action 也可以调用其他模块的 action。
同样的,当不同模块中有同名 action 时,通过 store.dispatch 调用,会依次触发所有同名 actions。
最后有一点要注意的是,将 store 中的 state 绑定到 Vue 组件中的 computed 计算属性后,对 state 进行更改需要通过 mutation 或者 action,在 Vue 组件中直接进行赋值 (this.myState = 'ABC') 是不会生效的。
感谢你的浏览,希望能有所帮助。
Vuex 模块化与项目实例 (2.0)的更多相关文章
- Vuex核心知识(2.0)
Vuex 是一个专门为 Vue.js 应该程序开发的状态管理模式,它类似于 Redux 应用于 React 项目中,他们都是一种 Flux 架构.相比 Redux,Vuex 更简洁,学习成本更低.希望 ...
- Vuex 模块化实现待办事项的状态管理
前言 在vue里,组件之间的作用域是独立的,父组件跟子组件之间的通讯可以通过prop属性来传参,但是在兄弟组件之间通讯就比较麻烦了.比如A组件要告诉一件事给B组件,那么A就要先告诉他们的爸组件,然后爸 ...
- vuex : 模块化改造
我们知道,vuex是vue技术栈中很重要的一部分,是一个很好用的状态管理库. 如果你的项目没有那么复杂,或者对vuex的使用没有那么重度,那么,是用不着modules功能的. 但如果你写着写着就发现你 ...
- 一个简单的实例演示vuex模块化和命名空间
因为Vuex Store是全局注册的,不利于较大的项目,引入模块分离业务状态和方法,引入命名空间解决不同模块内(getters,mutaions,actions)名称冲突的问题 ----------- ...
- vuex源码分析3.0.1(原创)
前言 chapter1 store构造函数 1.constructor 2.get state和set state 3.commit 4.dispatch 5.subscribe和subscribeA ...
- Vuex模块化
上图是vuex的结构图vuex即 store, 包含State,Action,Mutations, 每一个vue项目都需要使用vuex做组件之间的数据共享 使用场景: 数据最终存放在store的Sta ...
- vuex模块化。
项目结构: 1:在src下新建目录store,然后再建storemodule.js文件,把 上篇 store.js文件抽出来: import Vue from 'vue' import Vuex fr ...
- vuex 快速入门( 基于vue2.0,vue1.0未知可否)
1.原理概述 2.用户登录例子解析: 由上图可以看到: 1.组件的数据是username,我们把它以name放在state中: 2.更改name发生在mutations的回调里,事件名字是showUs ...
- java springmvc +spring+ mybaits 模块化开发框架 HTML5+css3.0+bootstrap响应式开发界面
需要源码,请加QQ:858-048-581 系统模块 1. 权限管理:点开二级菜单进入三级菜单显示 角色(基础权限)和按钮权限 角色(基础权限): 分角色组和角色,独立分配菜单权限和增 ...
随机推荐
- Android Material各种颜色设置
Blogpost about support appcompat v21 from Chris Banes
- js中,怎么解决cookie里面中文乱码问题
呵呵,我查了百度和谷歌,都没找到解决方案,但是,最终直接结合两个函数就可以了,哈哈哈,开心ing function getCookie(name) { var prefix = name + &quo ...
- linux下配置ip地址四种方法(图文)
(1)Ifconfig命令 第一种使用ifconfig命令配置网卡的ip地址.此命令通常用来零时的测试用,计算机启动后 ip地址的配置将自动失效.具体用法如下.Ipconfig ethx i ...
- cocoapod升级版本
原文 http://blog.csdn.net/sing_sing/article/details/49762359 该方法好用 sudo gem install -n /usr/local/bin ...
- Spring Boot Web Executable Demo
Spring Boot Web Executable Demo */--> pre.src {background-color: #292b2e; color: #b2b2b2;} pre.sr ...
- linx建立用戶&組
groupadd test 创建test用户组 useradd user1 创建user1用户 passwd user1 ...
- DevExpress控件学习总结(转)
DevExpress控件学习总结 1.Navigation & Layout 1.1 Bar Manager 如果想在窗体或用户控件(user control)上添加工具条(bars)或弹 ...
- hcharts中文网 一个js图表库
http://www.bossidc.com/info/gongju/2013/0717/2133.html hcharts源码包下载 http://www.hcharts.cn/demo/hig ...
- iOS 之 alcatraz (插件管理器)
1. 安装 1.1. 打开命令行 curl -fsSL https://raw.githubusercontent.com/supermarin/Alcatraz/deploy/Scripts/ins ...
- HDU-1256-画8
题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=1256 这题做的我好苦,开始题目理解错了,一直都不对,仔细看题,别急,慢慢来,别紧张, 难度到不大,但题 ...