vuex结合php,Vuex模块化(module)实例详解
本文主要和大家介绍Vuex 模块化(module),小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助到大家。
一、为什么需要模块化
前面我们讲到的例子都在一个状态树里进行,当一个项目比较大时,所有的状态都集中在一起会得到一个比较大的对象,进而显得臃肿,难以维护。为了解决这个问题,Vuex允许我们将store分割成模块(module),每个module有自己的state,mutation,action,getter,甚至还可以往下嵌套模块,下面我们看一个典型的模块化例子const moduleA = {
state: {....},
mutations: {....},
actions: {....},
getters: {....}
}
const moduleB = {
state: {....},
mutations: {....},
actions: {....},
getters: {....}
}
const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
})
store.state.a // moduleA的状态
store.state.b // moduleB的状态
二、模块的局部状态
模块内部的mutation和getter,接收的第一参数(state)是模块的局部状态对象,rootStateconst moduleA = {
state: { count: 0},
mutations: {
increment (state) {
// state是模块的局部状态,也就是上面的state
state.count++
}
},
getters: {
doubleCount (state, getters, rootState) {
// 参数 state为当前局部状态,rootState为根节点状态
return state.count * 2
}
},
actions: {
incremtnIfOddRootSum ( { state, commit, rootState } ) {
// 参数 state为当前局部状态,rootState为根节点状态
if ((state.cont + rootState.count) % 2 === 1) {
commit('increment')
}
}
}
}
三、命名空间(这里一定要看,不然有些时候会被坑)
上面所有的例子中,模块内部的action、mutation、getter是注册在全局命名空间的,如果你在moduleA和moduleB里分别声明了命名相同的action或者mutation或者getter(叫some),当你使用store.commit('some'),A和B模块会同时响应。所以,如果你希望你的模块更加自包含和提高可重用性,你可以添加namespaced: true的方式,使其成为命名空间模块。当模块被注册后,它的所有getter,action,mutation都会自动根据模块注册的路径调用整个命名,例如:const store = new Vuex.Store({
modules: {
account: {
namespaced: true,
state: {...}, // 模块内的状态已经是嵌套的,namespaced不会有影响
getters: { // 每一条注释为调用方法
isAdmin () { ... } // getters['account/isAdmin']
},
actions: {
login () {...} // dispatch('account/login')
},
mutations: {
login () {...} // commit('account/login')
},
modules: { // 继承父模块的命名空间
myPage : {
state: {...},
getters: {
profile () {...} // getters['account/profile']
}
},
posts: { // 进一步嵌套命名空间
namespaced: true,
getters: {
popular () {...} // getters['account/posts/popular']
}
}
}
}
}
})
启用了命名空间的getter和action会收到局部化的getter,dispatch和commit。你在使用模块内容时不需要再同一模块内添加空间名前缀,更改namespaced属性后不需要修改模块内的代码。
四、在命名空间模块内访问全局内容(Global Assets)
如果你希望使用全局state和getter,roorState和rootGetter会作为第三和第四参数传入getter,也会通过context对象的属性传入action若需要在全局命名空间内分发action或者提交mutation,将{ root: true }作为第三参数传给dispatch或commit即可。modules: {
foo: {
namespaced: true,
getters: {
// 在这个被命名的模块里,getters被局部化了
// 你可以使用getter的第四个参数来调用 'rootGetters'
someGetter (state, getters, rootSate, rootGetters) {
getters.someOtherGetter // -> 局部的getter, ‘foo/someOtherGetter'
rootGetters.someOtherGetter // -> 全局getter, 'someOtherGetter'
}
},
actions: {
// 在这个模块里,dispatch和commit也被局部化了
// 他们可以接受root属性以访问跟dispatch和commit
smoeActino ({dispatch, commit, getters, rootGetters }) {
getters.someGetter // 'foo/someGetter'
rootGetters.someGetter // 'someGetter'
dispatch('someOtherAction') // 'foo/someOtherAction'
dispatch('someOtherAction', null, {root: true}) // => ‘someOtherAction'
commit('someMutation') // 'foo/someMutation'
commit('someMutation', null, { root: true }) // someMutation
}
}
}
}
五、带命名空间的绑定函数
前面说过,带了命名空间后,调用时必须要写上命名空间,但是这样就比较繁琐,尤其涉及到多层嵌套时(当然开发中别嵌套太多,会晕。。)
下面我们看下一般写法computed: {
...mapState({
a: state => state.some.nested.module.a,
b: state => state.some.nested.module.b
}),
methods: {
...mapActions([
'some/nested/module/foo',
'some/nested/module/bar'
])
}
}
对于这种情况,你可以将模块的命名空间作为第一个参数传递给上述函数,这样所有的绑定会自动将该模块作为上下文。简化写就是computed: {
...mapStates('some/nested/module', {
a: state => state.a,
b: state => state.b
})
},
methods: {
...mapActions('some/nested/module',[
'foo',
'bar'
])
}
六、模块重用
有时我们可能创建一个模块的多个实例,例如:创建多个store,他们共用一个模块
在一个store中多次注册同一个模块
如果我们使用一个纯对象来声明模块的状态,那么这个状态对象会通过引用被共享,导致数据互相污染。
实际上Vue组件内data是同样的问题,因此解决办法也是一样的,使用一个函数来声明模块状态(2.3.0+支持)const MyModule = {
state () {
return {
foo: 'far'
}
}
}
七、总结
到这里模块化(module)的内容就已经讲完了,本次主要讲解了module出现的原因,使用方法,全局和局部namespaced模块命名空间,局部访问全局内容,map函数带有命名空间的绑定函数和模块的重用。
引用
https://vuex.vuejs.org Vuex官方文档
相关推荐:
vuex结合php,Vuex模块化(module)实例详解相关推荐
- php 微信开发实战pdf,微信开发实战之模块化的实例详解
在任何一个大型应用中模块化是很常见的,与一些更传统的编程语言不同的是,JavaScript (ECMA-262版本)还不支持原生的模块化. Javascript社区做了很多努力,在现有的运行环境中,实 ...
- java写mapstate算子,vuex state及mapState的基础用法详解
vuex state及mapState的基础用法详解 2019-01-07 编程之家收集整理的这篇文章主要介绍了vuex state及mapState的基础用法详解,编程之家小编觉得挺不错的,现在分享 ...
- vue项目结构php写哪里,vuex项目结构目录与配置使用详解
这次给大家带来vuex项目结构目录与配置使用详解,使用vuex项目结构目录与配置的注意事项有哪些,下面就是实战案例,一起来看一下. 首先先正经的来一段官网的"忠告": vuex需要 ...
- vue仿今日头条_Vue仿今日头条实例详解
前言 vue也弄了一段时间了,前段时间一直想用vue写个移动端,加之年底也不是很忙,于是前几天便着手开始弄了,到今天为止也算是勉强能看了 因为也是纯粹的写写前端页面,所以数据方面用的是mock.js, ...
- 【ES6】Module模块详解
[ES6]Module模块详解 一.Module的由来 二.严格模式 三.export命令 四.import命令 查看更多ES6教学文章: 参考文献 引言:由于两个JS文件之间相互使用必须通过一个ht ...
- angularjs directive 实例 详解
angularjs directive 实例 详解 张映 发表于 2014-03-13 前面提到了angularjs的factory,service,provider,这个可以理解成php的model ...
- php 断点续传 暂停,PHP 断点续传实例详解
在做一个案例,要给客户端做断点续传的服务, 断点续传主要是HTTP协议中的Content-Range报头.其理解如下: Content-Range:响应资源的范围.可以在多次请求中标记请求的资源范围, ...
- python随机生成二维列表_对python产生随机的二维数组实例详解
对python产生随机的二维数组实例详解 最近找遍了python的各个函数发现无法直接生成随机的二维数组,其中包括random()相关的各种方法,都没有得到想要的结果.最后在一篇博客中受到启发,通过列 ...
- 小程序怎么处理轮训ajax,微信小程序中使用Promise进行异步流程处理的实例详解...
微信小程序中使用Promise进行异步流程处理的实例详解 我们知道,JavaScript是单进程执行的,同步操作会对程序的执行进行阻塞处理.比如在浏览器页面程序中,如果一段同步的代码需要执行很长时间( ...
最新文章
- 图解phpstorm常用快捷键
- C++中类的组合和继承关系
- 文件系统_Docker文件系统实战
- SAP Fiori Elements - how facet is loaded for my productive POC
- 黑色自适应简约个人主页引导页HTML源码
- efficientnet-yolo3-tf2的实现
- java颜色常量,Java FX场景构建器无法识别css自定义颜色常量(或变量)
- LabView2018的安装
- 禅道备份功能_禅道数据库备份
- sql语句 -- 倒序 升序
- 不显示藏宝阁试穿服务器,梦幻西游:藏宝阁试穿功能的妙用,无限回档测试
- JavaScript实现动态添加、移除元素或属性的方法分析
- android 动画停止播放,Android动画暂停和播放问题
- qqkey获取原理_编译原理(第3版)[刘铭][实验程序源代码]
- 【编程|二十四点】关于编程解决二十四点的两种思路
- Linux下的打包(tar)、压缩(gzip / bzip2)
- 操作系统银行家算法计算机四级,【NCRE四级网络工程师】操作系统多选题
- 牛刀:中国房价的买点还没有…
- 欢迎莅临HPX华南理工大学——产品经理职业规划讲座
- 视频监控一般都存储在哪里?如何实现云端集中存储?
热门文章
- C++反向迭代器的原理+模拟实现+萃取
- C++与JAVA代码实现CRC-16/MODBUS算法,且与 http://www.ip33.com/crc.html 进行结果验证
- SPSS教程—如何对数据进行双变量相关分析
- 世界上唯一可以刷卡买飞机的信用卡
- 一张图带你了解物联网协议栈
- 使用Python进行英文词频统计
- 【蓝桥杯】什么算法才是版本答案?近三年(2019-2021)蓝桥杯省赛涉及算法出现频率分析
- 2023年第十六届“认证杯”数学中国数学建模网络挑战赛
- windows10 更改cmd字体为Consolas+微软雅黑 完美解决方案
- 物联网毕设分享 STM32智能饮水机控制系统(源码+硬件+论文)