第四十五章 Vue之Vuex模块化创建(module)

目录

一、引言

二、模块化拆分创建方式

三、模块化拆分完整代码

3.1. index.js

3.2. module1.js 

3.3. module2.js 

3.4. module3.js 

3.5. main.js

3.6. App.vue

3.7. Son1.vue

3.8. Son2.vue

四、访问模块module的state

​五、访问模块中的getters

​六、mutations修改模块的state

七、action修改模块的state


一、引言

由于 vuex 使用单一状态树,应用的所有状态会集中到一个比较大的对象。

当应用变得非常复杂时,store 对象就有可能变得相当臃肿,也就是当我们的项目变得越来越大的时候,Vuex会变得越来越难以维护。

二、模块化拆分创建方式

这个时候我们就需要考虑到模块的拆分,将不同功能模块对应的store由单独的index.js进行管理,比如我们有module1、module2、module3三个业务模块,我们将三个模块挂载到store目录下的index.js中统一管理:

三、模块化拆分完整代码

3.1. index.js

// 存放的是vuex相关的核心代码
import Vue from 'vue'
import Vuex from 'vuex'
import module1 from './module1/module1'
import module2 from './module2/module2'
import module3 from './module3/module3'// 配置插件给Vue使用
Vue.use(Vuex)// 创建仓库(空仓库)
const store = new Vuex.Store({// 严格模式(有利于初学者,检测不规范的代码 => 上线的时候可以去掉)strict: true,// 1. 通过 state提供数据(所有组件可以共享)state: {title: '大标题',count: 100,list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]},// 2. 通过 mutations 可以提供修改数据的方法mutations: {// 所有mutation函数,第一个参数,都是 stateaddCount (state, n) {// 修改数据state.count += n},subCount (state, n) {// 修改数据state.count -= n},changeTitle (state, obj) {state.title = obj.newTitle},changeCount (state, newCount) {state.count += newCount}},// 3. actions处理异步,它不能直接操作state,操作state还是需要commit mutationactions: {// context 上下文 (此处因为我们还未分模块,可以当成store仓库)// context.commit('mutation名字', 额外参数)changeCountAction (context, num) {// 这里是setTimeout模拟异步,以后大部分场景是发请求setTimeout(() => {context.commit('changeCount', num)}, 1000)}},// 4. getters 类似于计算属性getters: {// 注意点:// 1. 形参第一个参数,就是state// 2. 必须有返回值,返回值就是getters的值filterList (state) {return state.list.filter(item => item > 5)}},modules: {module1,module2,module3}
})// 导出给main.js使用
export default store

3.2. module1.js 

const state = {favourite: '骑行',desc: '爱好'
}const mutations = {}
const actions = {}
const getters = {}export default {state,mutations,actions,getters
}

3.3. module2.js 

const state = {age: '34',desc: '年龄'
}const mutations = {}
const actions = {}
const getters = {}export default {state,mutations,actions,getters
}

3.4. module3.js 

const state = {name: '王哲晓',desc: '姓名'
}const mutations = {}
const actions = {}
const getters = {}export default {state,mutations,actions,getters
}

3.5. main.js

import Vue from 'vue'
import App from './App.vue'
import store from '@/store/index'
console.log(store.state.count)Vue.config.productionTip = falsenew Vue({render: h => h(App),store
}).$mount('#app')

3.6. App.vue

<template><div id="app"><h1>根组件 - {{ title }} - {{ count }}</h1><input :value="count" @input="handleInput" type="text"><Son1></Son1><hr><Son2></Son2></div>
</template><script>
import Son1 from './components/Son1.vue'
import Son2 from './components/Son2.vue'
import { mapState } from 'vuex'export default {name: 'app',created () {console.log(this.$store.state.count)},data () {return {}},methods: {handleInput (e) {// 1.实时获取输入框的值const num = e.target.value// 2.提交mutation,调用mutation函数this.$store.commit('changeCount', num)}},computed: {...mapState(['count', 'title'])},components: {Son1,Son2}
}
</script><style></style>

3.7. Son1.vue

<template><div class="box"><h2>{{ $store.state.title }}</h2>从vuex中获取的值:<label>{{ $store.state.count }}</label><br /><button @click="subCount(1)">值 + 1</button><button @click="subCount(5)">值 + 5</button><button @click="subCount(10)">值 + 10</button><button @click="handleSub(1)">值 - 1</button><button @click="handleSub(5)">值 - 5</button><button @click="handleSub(10)">值 - 10</button><button @click="handleChange(34)">值 + 34</button><button @click="changeTitle">改标题</button><button @click="changeCountAction(6666)">1秒钟后化神</button><hr /><div>{{ $store.state.list }}</div><div>{{ $store.getters.filterList }}</div><hr /><div>{{ filterList }}</div></div>
</template><script>
import { mapMutations, mapActions, mapGetters } from 'vuex'
export default {name: 'Son1Com',computed: {...mapGetters(['filterList'])},methods: {handleAdd (n) {// 错误代码(vue默认不会监测,监测需要成本)// this.$store.state.count++// console.log(this.$store.state.count)// 应该通过 mutation 核心概念,进行修改仓库数据// 需要提交调用mutationthis.$store.commit('addCount', n)},...mapMutations(['subCount']),...mapActions(['changeCountAction']),changeTitle () {this.$store.commit('changeTitle', {name: '王哲晓',newTitle: '2024加油,迎接新的开始,新的起点,新的人生'})},handleChange (n) {// 调用action// this.$store.dispatch('action名字', 额外参数)this.$store.dispatch('changeCountAction', n)}}
}
</script><style lang="css" scoped>
.box {border: 3px solid #ccc;width: 400px;padding: 10px;margin: 20px;
}
h2 {margin-top: 10px;
}
</style>

3.8. Son2.vue

<template><div class="box"><h2>Son2 子组件</h2>从vuex中获取的值:<label>{{ count }}</label><br><button>值 - 1</button></div></template><script>
import { mapState } from 'vuex'
export default {name: 'Son2Com',computed: {...mapState(['count'])}
}
</script><style lang="css" scoped>
.box {border: 3px solid #ccc;width: 400px;padding: 10px;margin: 20px;
}
h2 {margin-top: 10px;
}
</style>

四、访问模块module的state

虽然我们已经对store进行了分模块,但其实子模块的状态,还是会挂到根级别的state  中,属性名就是模块名

使用模块中的数据:

① 直接通过模块名访问 $store.state.模块名.xxx

② 通过 mapState 映射

默认根级别的映射 mapState([ 'xxx' ])

子模块的映射 mapState('模块名', ['xxx']) - 需要开启命名空间

五、访问模块中的getters

使用模块中 getters 中的数据:

① 直接通过模块名访问 $store.getters['模块名/xxx ']

② 通过 mapGetters 映射

默认根级别的映射 mapGetters([ 'xxx' ])

子模块的映射 mapGetters('模块名', ['xxx']) - 需要开启命名空间

六、mutations修改模块的state

默认模块中的 mutation 和 actions 会被挂载到全局,需要开启命名空间,才会挂载到子模块。

调用子模块中的mutation方法:

① 直接通过 store 调用 $store.commit('模块名/xxx ', 额外参数)

② 通过 mapMutations 映射

默认根级别的映射 mapMutations([ 'xxx' ])

子模块的映射 mapMutations('模块名', ['xxx']) - 需要开启命名空间

七、action修改模块的state

action的修改调用语法直接类比mutation即可,默认模块中的 mutation 和 actions 会被挂载到全局,需要开启命名空间,才会挂载到子模块。

调用子模块中 action :

① 直接通过 store 调用 $store.dispatch('模块名/xxx ', 额外参数)

② 通过 mapActions 映射

默认根级别的映射 mapActions([ 'xxx' ])

子模块的映射 mapActions('模块名', ['xxx']) - 需要开启命名空间

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/59367.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

论文笔记 SuDORMRF:EFFICIENT NETWORKS FOR UNIVERSAL AUDIO SOURCE SEPARATION

SUDORMRF: EFFICIENT NETWORKS FOR UNIVERSAL AUDIO SOURCE SEPARATION 人的精神寄托可以是音乐&#xff0c;可以是书籍&#xff0c;可以是运动&#xff0c;可以是工作&#xff0c;可以是山川湖海&#xff0c;唯独不可以是人。 Depthwise Separable Convolution 深度分离卷积&a…

69页可编辑PPT | 大数据基础知识培训课件

课件全面介绍了大数据的基础知识&#xff0c;包括大数据的定义、特征、发展演进、产业链、关键技术以及市场规模等多个方面&#xff0c;旨在为观众提供一个关于大数据领域的综合性概览。 大数据基本概念 广义的定义(哲学) :大数据&#xff0c;是指物理世界到数字世界的映射和提…

仓储管理系统-综合管理(源码+文档+部署+讲解)

本文将深入解析“仓储管理系统-综合管理”的项目&#xff0c;探究其架构、功能以及技术栈&#xff0c;并分享获取完整源码的途径。 系统概述 仓储管理系统-综合管理是一个全面的仓库管理解决方案&#xff0c;旨在通过集成多种功能模块来优化仓库操作和管理流程。该系统提供了…

MYSQL中的两种转义操作

在 MySQL 中&#xff0c;转义字符用于处理特殊字符,以防止语法错误或 SQL 注入攻击,而单双引号都是需要重点注意的字符 可以用转义符\ 和 两个连续的引号 来起到转义引号的作用 转义符转义: 这是users表中的数据 如果查询admin 或者 admin" 用户,可以用转义符\ 两个连…

引领企业未来数字基础架构浪潮,中国铁塔探索超大规模分布式算力

分布式算力被中国信通院列入“2024政企数智化转型十大关键词”。中国信通院指出&#xff0c;随着新一代通信规模建设和边缘计算应用的持续部署&#xff0c;越来越多的应用运行和数据生产处理在边端侧开展&#xff0c;这对于传统算力基础设施的部署、调度提出了新要求&#xff0…

【数据结构】快排之三路划分

目录 一、前言 二、 快排性能的关键点分析 三、 三路划分基本思想 四、 思路分析 五、提醒 六、代码实现 一、前言 继续对快速排序的深入优化进行探讨 二、 快排性能的关键点分析 决定快排性能的关键点是每次单趟排序后&#xff0c;key对数组的分割。 如果每次选key都能…

Kafka面试题解答(一)

1.kafka消息发送的流程&#xff1f; 生产者&#xff1a;在消息发送的过程中涉及到了两个线程&#xff1a;main线程和sender线程。在main线程中创建了一个双端队列RecordAccumulator&#xff08;默认32m&#xff09;。main线程将消息发送RecordAccumulator,sender线程不断地从R…

基于yolov8、yolov5的番茄成熟度检测识别系统(含UI界面、训练好的模型、Python代码、数据集)

摘要&#xff1a;番茄成熟度检测在农业生产及质量控制中起着至关重要的作用&#xff0c;不仅能帮助农民及时采摘成熟的番茄&#xff0c;还为自动化农业监测提供了可靠的数据支撑。本文介绍了一款基于YOLOv8、YOLOv5等深度学习框架的番茄成熟度检测模型&#xff0c;该模型使用了…

Oracle 数据库创建导入

注意&#xff1a;本教程中的有些命令您可能并不熟悉&#xff0c;但没关系&#xff0c;只需按照说明一步一步创建示例数据库即可。在之后的教程中&#xff0c;会详细介绍每个命令。 1.创建新用户并授予权限 1.1.打开 首先&#xff0c;启动 SQL plus 程序的命令行&#xff1a;…

为centos7分配ip

前提&#xff1a; 安装好centos7 编辑文件 进入编辑模式[dmdbalocalhost ~]$ vim /etc/sysconfig/network-scripts/ifcfg-ens33 修改 BOOTPROTOstatic DNBOOTyes IPADDR192.168.152.11 NETMASK255.255.255.0 GATEWAY192.168.152.2 DNS18.8.8.8 点击esc .输入“:wq” 保存退…

内网安全-代理技术-socket协议

小迪安全网络架构图&#xff1a; 背景&#xff1a;当前获取window7 出网主机的shell。 1.使用msf上线&#xff0c;查看路由 run autoroute -p 添加路由&#xff1a; run post/multi/manage/autoroute 使用socks模块开启节点&#xff0c;作为流量跳板 msf6 exploit(multi/ha…

如何使用.bat实现电脑自动重启?

1、在电脑桌面新建一个记事本文档&#xff0c;将如下内容写进去&#xff1a; echo off shutdown /r /t 02、然后&#xff0c;保存一下&#xff0c;再把桌面此文件重命名为电脑重启.bat 3、双击此程序&#xff0c;可以立刻重启电脑。 PS&#xff1a;① 此程序会不保存任何当前…

YOLOv11融合CVPR[2024]自适应扩张卷积FADC模块及相关改进思路|YOLO改进最简教程

YOLOv11v10v8使用教程&#xff1a; YOLOv11入门到入土使用教程 YOLOv11改进汇总贴&#xff1a;YOLOv11及自研模型更新汇总 《Frequency-Adaptive Dilated Convolution for Semantic Segmentation》 一、 模块介绍 论文链接&#xff1a;https://arxiv.org/abs/2403.05369 代码…

Python 数据文件读写教程

Python 数据文件读写教程 在数据科学和软件开发中&#xff0c;文件的读写操作是至关重要的。Python 作为一门功能强大的编程语言&#xff0c;提供了多种方式来处理文件&#xff0c;包括文本文件、CSV 文件、JSON 文件等。在本教程中&#xff0c;我们将深入探讨 Python 中的数据…

模拟实现优先级队列

目录 定义 特点 构造函数 常用方法 关于扩容的问题 关于建堆的问题 向上调整和向下调整的比较 &#xff08;向上调整&#xff09;代码 &#xff08;向下调整&#xff09;代码 关于入队列和出队列问题 模拟实现优先级队列代码 关于堆排序的问题 堆排序代码 关于对…

Autosar CP DDS规范导读

Autosar CP DDS 主要用途 数据通信 中间件协议&#xff1a;作为一种中间件协议&#xff0c;DDS实现了应用程序之间的高效数据通信&#xff0c;能够在不同的软件组件和ECU之间传输数据&#xff0c;确保数据的实时性和可靠性。跨平台通信&#xff1a;支持在AUTOSAR CP平台上的不同…

数字IC实践项目(10)—基于System Verilog的DDR4 Model/Tb 及基础Verification IP的设计与验证(付费项目)

数字IC实践项目&#xff08;10&#xff09;—基于System Verilog的DDR4 Model/Tb 及基础Verification IP的设计与验证&#xff08;付费项目&#xff09; 前言项目框图1&#xff09;DDR4 Verification IP2&#xff09;DDR4 JEDEC Model & Tb 项目文件1&#xff09;DDR4 Veri…

Jmeter中的监听器(三)

9--断言结果 功能特点 显示断言结果&#xff1a;列出所有断言的结果&#xff0c;包括通过和失败的断言。详细信息&#xff1a;显示每个断言的详细信息&#xff0c;如断言类型、实际结果和期望结果。错误信息&#xff1a;显示断言失败时的错误信息&#xff0c;帮助调试。颜色编…

人工智能大比拼(3)

已知x-,y-6&#xff0c;且下述表达式的值与x的取值无关&#xff0c;求y -10x2y7xy 上述这个很简单的数学题&#xff0c;可是在各家AI之间出现了争议&#xff0c;本期我使用了四个AI&#xff1a;kimi&#xff0c;商量&#xff0c;文心一言&#xff0c;chatyy 先来看一下kimi的表…

Xilinx Aurora 8B/10B IP介绍以及下板验证

文章目录 一、什么是Aurora协议&#xff1f;二、Aurora 8B/10B IP核的结构原理三、Aurora 8B/10B IP核 延迟开销四、用户数据接口格式4.1 AXI4-Stream 位排序4.2 帧传输用户端口说明4.3 帧传输数据流程4.4 Aurora 8B/10B 帧格式4.5 帧格式数据传输时序4.5.1 简单数据传输4.5.2 …