对vuex分模块管理
为什么要分模块:
由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。为了解决以上问题,Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter(模块大的话可以把 state、mutation、action、getter拆分成独立的文件)。
案例
src/store/card/index.js (子模块)
方式一:state、mutation、action、getter统一写在index.js
const card = {
/**
* 定义命名空间,防止多个模块同名共享,使用时需要带上命名空间
*/
namespaced: true,
state: {
cardArr: [],
},
mutations: {
addCard(state, obj){
state.cardArr.push(obj);
}
},
actions: {
addCardFun(store, obj){
store.commit('addCard', obj);
}
}
}
//导出
export default card;
方式二:state、mutation、action、getter拆分成独立的文件
src/store/card/state.js
export default {
cardArr: []
}
src/store/card/mutations.js
export default {
addCard(state, obj){
state.cardArr.push(obj);
}
}
src/store/card/actions.js
export default {
addCardFun(store, obj){
store.commit('addCard', obj);
}
}
src/store/card/index.js (子模块)
import state from './state'
import getters from './getters'
import mutations from './mutations'
import actions from './actions'
export default {
namespaced: true,
state,
getters,
mutations,
actions
}
src/store/index.js(在总的store中中配置vuex)
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
import card from './card'
//构造store
const store = new Vuex.Store({
// 模块化
modules: {
card: card
}
});
export default store;
在card.vue中使用store里的数据
<template>
<div>
显示卡列表:<button @click="onAdd">追加卡信息</button>
<ul>
<li v-for="(result, index) in cardArr" :key="index">
卡号:{{result.no}} <br>
昵称:{{result.name}}
</li>
</ul>
</div>
</template>
<script>
// 导入state、mapMutations、actions
import { mapState, mapMutations, actions } from 'vuex';
export default {
data(){
return {
}
},
computed:{
// 映射带有命名空间的state,第一个参数模块名
...mapState('card', [
cardArr: state => state.cardArr
])
},
methods: {
// 映射带有命名空间的mutations,第一个参数模块名
...mapMutations('card' ,[
'addCard',
]),
// 映射带有命名空间的actions,第一个参数模块名
...mapActions('card', [
'addCardFun'
])
onAdd(){
...
//this.$store.commit('card/addCard', data);
this.addCard(data);
// 通过actions调用
//this.$store.dispatch('card/addCardFun', data)
this.addCardFun(data);
}
}
}
</script>
对vuex分模块管理的更多相关文章
- vuex分模块管理
1.定义命名空间 dog.js export default { namespaced: true, // 局部状态 state: { name: "拉布拉多", age: 1 } ...
- vuex分模块后,如何获取state的值
问题:vuex分模块后,一个模块如何拿到其他模块的state值,调其他模块的方法? 思路:1.通过命名空间取值--this.$store.state.car.list // OK 2.通过定义该属性的 ...
- vuex分模块3
nuxt 踩坑之 -- Vuex状态树的模块方式使用 原创 2017年12月20日 11:24:14 标签: vue / nuxt / vuex / 模块化 / 状态管理 874 初次看到这个模块方式 ...
- vuex分模块4
Vuex下Store的模块化拆分实践 https://segmentfault.com/a/1190000007667542 vue.js vuex 猫切 2016年12月02日发布 赞 | 1 ...
- vuex分模块2
深入理解Vuex 模块化(module) 转载 2017-09-26 作者:ClassName 我要评论 本篇文章主要介绍了Vuex 模块化(module),小编觉得挺不错的,现在分享给大 ...
- vuex分模块
Vuex速学篇:(4)把我们的业务按模块分类 原创 2016年11月29日 10:45:38 8504 文档:http://vuex.vuejs.org/zh-cn/modules.html 这个mo ...
- Java高级架构师(一)第02节:分模块、分工程管理
本节课程的目标在于:利用Maven构建分工程.分模块的空项目. -------- 基本的构建大致相同,有一个强调调点: 在总web的pom里边(architecture01web中),加入要合并的wa ...
- 分模块创建maven项目(一)
maven是一个项目构建和管理的工具. 我们可以通过maven仓库可以实现管理构建(主要是JAR还包括:WAR,ZIP,POM等等). 我们可以通过maven插件可以实现编译源代.产生Javadoc文 ...
- npm模块管理器入门
什么是 NPM npm 是 Node 官方提供的包管理工具,他已经成了 Node 包的标准发布平台,用于 Node 包的发布.传播.依赖控制.npm 提供了命令行工具,使你可以方便地下载.安装.升级. ...
随机推荐
- 查看memcache版本
window: cmd中用telnet 127.0.0.1 11211这样的命令连接上memcache,然后直接输入stats就可以得到memcache服务器的版本. 注意:memcache的默认端口 ...
- 【Java/JDBC】利用ResultSetMetaData从数据库的某表中获取字段信息并存到csv文件
代码下载:https://files.cnblogs.com/files/xiandedanteng/FindNotnullColumns20191102-2.rar 这篇还不够完善,请看更完善的续篇 ...
- LightGBM两种使用方式
原生形式使用lightgbm(import lightgbm as lgb) import lightgbm as lgb from sklearn.metrics import mean_squar ...
- Mapper抽象类参数
Mapper< Object, Text, Text, IntWritable> Mapper< Text, Text, Text, Text> Mapper< Text ...
- TFTP反射放大攻击浅析
0x00 前言 经由@杀戮提示,让我看看softpedia上的这篇报道,咱就来研究一下文中的使用TFTP(Trivial File Transfer Protocol,简单文件传输协议)进行反射型DD ...
- 极客时间-左耳听风-程序员攻略-异步I/O模型和Lock-Free编程
异步 I/O 模型 异步 I/O 模型其中的设计模式或是解决方法可以借鉴到分布式架构上来. 史蒂文斯(Stevens)在<UNIX 网络编程>一书 6.2 I/O Models 中介绍了五 ...
- xampp 启动mysql 显示busy
1.端口被占用问题:2.默认3306端口并没有被占用:3.删除xampp\mysql\data\下的ibdata1再重启:4.没装其他mysql.
- 提示/bin/roslyn/csc.exe权限不足
给/bin/roslyn/csc.exe 读取/执行 权限
- Java中处理OPC寄存器数据类型
1. 在milo中,处理WORD等数据类型 例子如下: VariableNode node = client.getAddressSpace().createVariableNode( new Nod ...
- Windows核心编程随笔
最近在学习Windows底层原理,准备写个系列文章分享给大家,Michael Li(微软实习期间的Mentor,为人超好)在知乎回答过一些关于学习Windows原理的书籍推荐,大家可以拜读其中一本来入 ...