第四十五章 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…

快速上手STL中list的使用

目录 1.list的构造函数 2.list的赋值运算符重载 3.list的容量操作 4.list的元素访问 5.list的插入删除 insert和erase 头插头删和尾插尾删 6.list的其他操作 交换两个list 改变list的size 清空list 转移链表中的元素 1.list的构造函数 函数原型&#xff1a; 默认…

JavaScript调用系统自带的打印页面

JavaScript调用系统自带的打印页面 export function printPdf(data: BlobPart,) {const blob new Blob([data], { type: application/pdf })let date (new Date()).getTime()let ifr document.createElement(iframe)ifr.style.frameborder noifr.style.display noneifr.s…

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

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

Kafka面试题解答(一)

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

如何使用 XML Schema

如何使用 XML Schema XML Schema,也称为XSD(XML Schema Definition),是一种用于定义XML文档结构和内容的语言。它提供了一种强大的方式来描述XML文档中允许的元素、属性和数据类型。使用XML Schema,可以确保XML文档符合预定义的结构,这对于数据交换、数据验证和应用程序…

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

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

Oracle 数据库创建导入

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

[数组二分查找] 0081. 搜索旋转排序数组||

文章目录 1. 题目链接2. 题目大意3. 示例4. 解题思路5. 参考代码 1. 题目链接 81. 搜索旋转排序数组 II - 力扣&#xff08;LeetCode&#xff09; 2. 题目大意 描述&#xff1a;一个按照升序排列的整数数组 nums&#xff0c;在位置的某个下标 k 处进行了旋转操作。 &#xff…

为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” 保存退…

【Unity/QFramework】QFramework学习笔记

文章目录 基础流程示例程序【PointGame】ArchitectureStoragePlayerPrefsStorage : IStorage ModelGameModel : AbstractModel, IGameModel ControllerGame : MonoBehaviour, IControllerEnemy : MonoBehaviour, IControllerMissArea : MonoBehaviour, IController CommandStar…

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

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

GaussDB部署架构

GaussDB部署架构 云数据库GaussDB管理平台&#xff08;TPOPS&#xff09;基于B/S架构开发&#xff0c;由Web、管控Service、管控Agent三部分组成&#xff0c;软件结构如图1所示。 图1 各节点部署架构 Web&#xff1a;作为用户接入子系统&#xff0c;用于将用户在Web下发的操作…

如何使用.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 代码…

简单叙述 Spring Boot 启动过程

文章目录 1. 准备阶段&#xff1a;应用启动的入口2. 创建 SpringApplication 对象&#xff1a;开始启动工作3. 配置环境&#xff08;Environment&#xff09;&#xff1a;识别开发环境与生产环境4. 启动监听器和初始化器&#xff1a;感知启动的关键事件5. 创建 ApplicationCont…