第四十五章 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.rhkb.cn/news/471432.html

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

相关文章

【OpenEuler】配置虚拟ip

OpenEuler系统手动配置虚ip 介绍操作方法临时生效永久生效 验证 介绍 我们知道通过keepalived服务可以为linux服务器设置虚拟ip&#xff0c;但是有些特殊场景下若无法安装部署keepalived服务&#xff0c;则需要通过手动设置的方式&#xff0c;配置服务器的虚拟ip。 本方案提供…

CCI3.0-HQ:用于预训练大型语言模型的高质量大规模中文数据集

摘要 我们介绍了 CCI3.0-HQ&#xff0c;它是中文语料库互联网 3.0&#xff08;CCI3.0&#xff09;的一个高质量500GB子集&#xff0c;采用新颖的两阶段混合过滤管道开发&#xff0c;显著提高了数据质量。为了评估其有效性&#xff0c;我们在不同数据集的100B tokens上从头开始…

fastadmin多个表crud连表操作步骤

1、crud命令 php think crud -t xq_user_credential -u 1 -c credential -i voucher_type,nickname,user_id,voucher_url,status,time --forcetrue2、修改控制器controller文件 <?phpnamespace app\admin\controller;use app\common\controller\Backend;/*** 凭证信息…

安装SQL server中python和R

这两个都是编程语言 R 是一种专门为统计计算和数据分析而设计的语言&#xff0c;它具有丰富的统计函数和绘图工具&#xff0c;常用于学术研究、数据分析和统计建模等领域。 Python 是一种通用型编程语言&#xff0c;具有简单易学、语法简洁、功能强大等特点。它在数据科学、机…

项目技术栈-解决方案-web3去中心化

web3去中心化 Web3 DApp区块链:钱包:智能合约:UI:ETH系开发技能树DeFi应用 去中心化金融P2P 去中心化网络参考Web3 DApp 区块链: 以以太坊(Ethereum)为主流,也包括Solana、Aptos等其他非EVM链。 区块链本身是软件,需要运行在一系列节点上,这些节点组成P2P网络或者半…

【linux】centos7 换阿里云源

查看yum配置文件 yum的配置文件通常位于/etc/yum.repos.d/目录下。你可以使用以下命令查看这些文件&#xff1a; ls /etc/yum.repos.d/ # 或者 ll /etc/yum.repos.d/备份当前的yum配置文件 建议备份当前的yum配置文件&#xff1a; sudo cp /etc/yum.repos.d/CentOS-Base.re…

Python 中.title()函数和.lower()函数

一.title()函数 1.title()函数的功能 将字符串中的每一单词的首字母大写 2.举例 S1"i love you" S2S1.title() print(S2)3.输出 二.lower()函数 1.lower()函数的功能 将字符串中的每一大写字母都变成的小写字母 2.举例 S1"I LOVE YOU" S2S1.lower()…

[DEBUG] 服务器 CORS 已经允许所有源,仍然有 304 的跨域问题

背景 今天有一台服务器到期了&#xff0c;准备把后端迁移到另一台服务器上&#xff0c;结果前端在测试的时候&#xff0c;出现了 304 的跨域问题。 调试过程中出现的问题&#xff0c;包括但不限于&#xff1a; set the request’s mode to ‘no-cors’Redirect is not allow…

【AI构思渲染】网络直播——建筑绘图大模型生成渲染图

家人们&#xff01;&#xff01;好消息来了&#xff01;&#xff01; 2024年11月19日&#xff0c;上午10:00-11:00 构力学堂将会给大家带来一场直播课《AI构思渲染第一课&#xff0c;建筑绘图大模型生成渲染图》 课程亮点&#xff1a; 1、AI插件相关介绍 2、AI构思渲染安装…

初级数据结构——栈

目录 前言一、栈的基本概念二、栈的实现方式三、栈的性能分析四、栈的应用场景五、栈的变体六、出栈入栈的动态图解七、代码模版八、总结结语 前言 数据结构栈&#xff08;Stack&#xff09;是一种线性的数据结构&#xff0c;它只允许在序列的一端&#xff08;称为栈顶&#x…

ESLint 使用教程(五):ESLint 和 Prettier 的结合使用与冲突解决

前言 在现代前端开发中&#xff0c;代码质量与代码风格的统一是两个非常重要的方面。良好的代码质量能减少 bug 的产生&#xff0c;而统一的代码风格则能提高团队协作的效率。为了实现这两个目标&#xff0c;我们通常会使用一些工具。 为了保证代码的可读性和维护性&#xff0…

简易入手《SOM神经网络》的本质与原理

原创文章&#xff0c;转载请说明来自《老饼讲解神经网络》:www.bbbdata.com 关于《老饼讲解神经网络》&#xff1a; 本网结构化讲解神经网络的知识&#xff0c;原理和代码。 重现matlab神经网络工具箱的算法&#xff0c;是学习神经网络的好助手。 目录 一、入门原理解说 01.…

数字IC后端实现之Innovus specifyCellEdgeSpacing和ICC2 set_placement_spacing_rule的应用

昨天帮助社区IC训练营学员远程协助解决一个Calibre DRC案例。通过这个DRC Violation向大家分享下Innovus和ICC2中如何批量约束cell的spacing rule。 数字IC后端手把手实战教程 | Innovus verify_drc VIA1 DRC Violation解析及脚本自动化修复方案 下图所示为T12nm A55项目的Ca…

深度学习神经网络在机器人领域应用的深度剖析:原理、实践与前沿探索

深度学习神经网络在机器人领域的应用非常广泛&#xff0c;以下是详细介绍&#xff1a; 主要应用方向 环境感知与识别&#xff1a; 物体识别与分类&#xff1a;机器人利用深度学习神经网络能够准确识别周围环境中的各种物体&#xff0c;比如区分不同形状、颜色、材质的物品&…

自动化工具 Gulp

自动化工具 gulp 摘要 概念&#xff1a;gulp用于自动化开发流程。 理解&#xff1a;我们只需要编写任务&#xff0c;然后gulp帮我们执行 核心概念&#xff1a; 任务&#xff1a;通过定义不同的任务来组织你的构建流程。 管道&#xff1a;通过管道方式将文件从一个插件传递…

基于Spring Boot与Redis的令牌主动失效机制实现

目录 前言1. 项目结构和依赖配置1.1 项目依赖配置1.2 Redis连接配置 2. 令牌主动失效机制的实现流程2.1 登录成功后将令牌存储到Redis中2.2 使用拦截器验证令牌2.3 用户修改密码后删除旧令牌 3. Redis的配置与测试4. 可能的扩展与优化结语 前言 在现代Web系统中&#xff0c;用…

llama factory lora 微调 qwen2.5 7B Instruct模型

项目背景 甲方提供一台三卡4080显卡 需要进行qwen2.5 7b Instruct模型进行微调。以下为整体设计。 要使用 LLaMA-Factory 对 Qwen2.5 7B Instruct模型 进行 LoRA&#xff08;Low-Rank Adapters&#xff09;微调&#xff0c;流程与之前提到的 Qwen2 7B Instruct 模型类似。LoRA …

GPT-5 要来了:抢先了解其创新突破

Microsoft 的工程师计划于 2024 年 11 月在 Azure 上部署 Orion (GPT-5)。虽然这一版本不会向公众开放&#xff0c;但其上线被视为人工智能领域的一个重要里程碑&#xff0c;并将产生深远的影响。 文章目录 GPT-5 真的要来了GPT-4 的局限性GPT-5 的创新突破与遗留挑战GPT-5 预期…

微澜:用 OceanBase 搭建基于知识图谱的实时资讯流的应用实践

本文作者&#xff1a; 北京深鉴智源科技有限公司架构师 郑荣凯 本文整理自北京深鉴智源科技有限公司架构师郑荣凯&#xff0c;在《深入浅出 OceanBase 第四期》的分享。 知识图谱是一项综合性的系统工程&#xff0c;需要在在各种应用场景中向用户展示经过分页的一度关系。 微…

FluentUI使用

首先向Qt Qml FluentUI组件库的作者zhuzichu520致敬&#xff01; 一、源码下载地址&#xff1a; 1&#xff09;GitHub - zhuzichu520/FluentUI: FluentUI for QML 2&#xff09;GitCode - 全球开发者的开源社区,开源代码托管平台 二、Qt6下载地址&#xff1a; qt-online-i…