Vuex分模块使用
发布日期:2022-02-17 02:39:47 浏览次数:20 分类:技术文章

本文共 2544 字,大约阅读时间需要 8 分钟。

前言

最近在做练手项目时,把vuex分模块进行了管理。但是对于语法的不熟悉,导致漏洞百出。这两天结合了vuex的官方文档,操作了一下分模块下,如何读取state、getters、actions等,如下是记录过程。

为什么分模块

之前看的代码,是把所有state、getters、actions写在一个文件,由于项目较大,感觉逻辑有点乱,于是可以利用分模块的办法,給每一个模块单独的state、getters、actions等,从而使得逻辑结构清晰。

案例代码

说明

如下图所示,我主要是分了两个模块a、b,分别在vue组件里测试了下面四种情况,一般来说不会通过a模块去修改b模块的。再用语法糖…mapGetters、…mapState、…mapActions分别访问。

任务描述
每个module下都有自己的actions、getters、mutations、state等,moduleA|B/index.js的内容如下

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 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:centos6.8安装docker
下一篇:Vuex中getters动态获取state的值

发表评论

最新留言

很好
[***.229.124.182]2023年05月23日 10时56分36秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

最新文章

table.reload 只刷新table_EXCEL也能实时刷新股票信息~太神奇了 2019-12-02 03:25:34
判断是否是完全二叉树_二叉树高频面试题和答案 2019-12-02 03:25:34
servlet访问中文文件访问不到_电脑小技巧远程访问共享文件夹 2019-12-02 03:25:34
sql 插入新数据 如何处理>等字符_条码打印软件之如何在条码数据插入字符而不被扫描... 2019-12-02 03:25:35
pythonscrollbar布局_python GUI库图形界面开发之PyQt5滚动条控件QScrollBar详细使用方法与实例... 2019-12-02 03:25:35
电影推荐系统 python简书_推荐系统实战 2019-12-02 03:25:35
phpmyadmin漏洞_CVE201912922 phpMyAdmin 4.9.0.1跨站请求伪造漏洞复现 2019-12-02 03:25:31
python 下划线_我终于把Python中下划线的含义弄清楚了(憋了很久了) 2019-12-02 03:25:32
串口数据解析_物联网基础:EC20 连接阿里云进行数据收发 2019-12-02 03:25:32
反arp攻击软件_甜橙安全头条第23期技术干货之透析中间人攻击 2019-12-02 03:25:32
storm 机器上日志查询_达达基于Kubernetes混部的日志系统演变 2019-12-02 03:25:33
高精度事件计时器怎么关闭_Node.js 事件循环的工作流程 & 生命周期 2019-12-02 03:25:33
行业网站设计策划书_2020年餐饮开店方案策划书 2019-12-02 03:25:33
计算机基础知识_计算机基础知识的最小集合 2019-12-02 03:25:33
composer升级_Composer 2.0 发布带来的性能优化、新特性和升级指南 2019-12-02 03:25:30
isight参数优化理论与实例详解_案例1(ISIGHT使用须知) 2019-12-02 03:25:30
dockerfile构建镜像的命令_Dockerfile构建指南怎样构建一个适用企业级的镜像 2019-12-02 03:25:30
el-form input 数字_浅析数字时代下的两种转型 2019-12-02 03:25:31
步步高vivo高通解锁工具_2020高通骁龙技术峰会预告:骁龙875揭开面纱 小米三星再争首发... 2019-12-02 03:25:31
arcgis删除栅格数据波段_【实用】62个关于ArcGIS的常用技巧 2019-12-02 03:25:31