
Vuex分模块使用
每个module下都有自己的actions、getters、mutations、state等,moduleA|B/index.js的内容如下
发布日期:2022-02-17 02:39:47
浏览次数:29
分类:技术文章
本文共 2544 字,大约阅读时间需要 8 分钟。
前言
最近在做练手项目时,把vuex分模块进行了管理。但是对于语法的不熟悉,导致漏洞百出。这两天结合了vuex的官方文档,操作了一下分模块下,如何读取state、getters、actions等,如下是记录过程。
为什么分模块
之前看的代码,是把所有state、getters、actions写在一个文件,由于项目较大,感觉逻辑有点乱,于是可以利用分模块的办法,給每一个模块单独的state、getters、actions等,从而使得逻辑结构清晰。
案例代码
说明
如下图所示,我主要是分了两个模块a、b,分别在vue组件里测试了下面四种情况,一般来说不会通过a模块去修改b模块的。再用语法糖…mapGetters、…mapState、…mapActions分别访问。

import actions from './actions'import state from './state'import getters from './getters'import mutations from './mutations'export default { // 默认情况下,模块内部的 action、mutation 和 getter 是注册在全局命名空间的——这样使得多个模块能够对同一 mutation 或 action 作出响应,指定命名空间可以 // 如果希望你的模块具有更高的封装度和复用性,你可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。当模块被注册后,它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名 namespaced: true, state, actions, getters, mutations}// 向外暴露对象,可以自定义名字接收 export default
最外层的index.js内容如下:
import Vue from 'vue'import Vuex from 'vuex'import moduleA from './moduleA/index'import moduleB from './moduleB/index'Vue.use(Vuex) // 注册插件export default new Vuex.Store({ modules: { a: moduleA, b: moduleB }})
①访问state的两种方式
computed: { // state的两种获取方法 ...mapState({ stateB: (rootState) => rootState.b.stateB }), stateA: function () { return this.$store.state.a.stateA }, }
②访问getters的两种方式
computed: { // getters的两种获取方法 ...mapGetters('b', { getStateB: 'getStateB' // 调用b模块下的getStateB并映射为getStateB计算属性 }), getStateA: function () { return this.$store.getters['b/getStateA'] // 也可通过this.$store.getters方法调用计算属性,同时映射计算属性 } },
③访问actions的两种方式
methods: { // actions的两种获取方法 ...mapActions('b', { changeStateB: 'changeStateB', // 把b模块下的该方法映射为changeStateB(),可以用个this.$store.dispatch changeStateAB: 'changeStateAB' }), changeStateBB () { return this.$store.dispatch('b/changeStateB') } }
④a模块修改b模块的state两种方式【moduleB/actions.js】
export default { changeStateB (context) { const newStateB = context.state.stateB + 1 context.commit('changeB', { newStateB }) }, changeStateAB ({ state, commit, rootState }) { // context可以解析出state,commit,rootState const newStateB = state.stateB + 1000 commit('changeB', { newStateB }) const newStateA = rootState.a.stateA + 'aaaaaa' // 一般不直接改变state,而是通过action->mutaion去改变 commit('a/changeA', { newStateA }, { root: true }) // 可以设置root=true,即可访问到其他模块的action,默认是b模块下mutations里面的函数名称 }}
总结
官方文档还有一些模块重用、模块注册以及命名空间的具体用法,感兴趣的小伙伴可以自行研究。谨以此记录vuex分模块的用法,若有不足,还请多多指教!
转载地址:https://blog.csdn.net/qq_39811414/article/details/109055666 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
关注你微信了!
[***.104.42.241]2023年08月27日 06时46分29秒
关于作者

喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
【Java】List集合常用创建方式
2019-03-07
【Java】String字符串的比较
2019-03-07
基于Spark rdd的单词计数,Java与Scala版本
2019-03-07
由GeoJson格式渲染地图
2019-03-07
Spark集群启动与查看Spark集群进程启动情况
2019-03-07
浮点数精度问题——由Mathf.Floor()引发的思考
2019-03-07
Unity——浅谈AB包(AssetBundle)
2019-03-07
Mac、移动端的抓包方式和注意事项——Charles
2019-03-07
Unity资源管理和策略
2019-03-07
番茄工作法——总结笔记
2019-03-07
Redux 源码共读 -- 1
2019-03-07
使用 nodeJs 实现 js/ts 文件翻译功能
2019-03-07
图片添加水印、文件转图片、图片转文件、html2canvas截屏功能
2019-03-07
React技术1-集成react router
2019-03-07
使用 node 和 socket 实现在线聊天室
2019-03-07
设置定时器和清除定时器的最佳方案
2019-03-07
Element-ui 对话框el-dialog点击关闭事件处理
2019-03-07
前端通过Vue自己实现输入框模糊筛选数据,并将筛选结果展示
2019-03-07
Vue实现移动端APP的方格布局横向滑动翻页带滚动条
2019-03-07