Vue:Vuex模块化编码(非常实用)

一、情景说明

通过前面的学习,我们知道,Vuex的核心文件就是indexc.js
这个文件里面,主要是四个对象
actions、mutations、state、getters

那么,随着业务的复杂化,所有的逻辑都写在一个actions里面吗?
显然不是。

这次就来学习下如何实现Vuex的模块化编码
根据业务情况,进行划分
这样的好处显而易见!

二、案例

编码思想大概是这样的
我们根据业务情况,对Vuex的配置进行划分模块
然后,将相应的业务配置独立到一个js文件中,并命名成相关业务名称
再在index.js文件中,进行import导入这些独立出来的js业务配置文件
在通过modules关键字,进行引用即可。

count.js文件,求和相关的配置
关键配置:namespaced:true

//求和相关配置
export default {namespaced:true,actions:{jiaOdd(context,value){console.log('actions中的jiaOdd被调用了')if(context.state.sum % 2){context.commit('JIA',value)}},jiaWait(context,value){console.log('actions中的jiaWait被调用了')setTimeout(()=>{context.commit('JIA',value)},500)}},mutations:{JIA(state,value){console.log('mutations中的JIA被调用了')state.sum += value},JIAN(state,value){console.log('mutations中的JIAN被调用了')state.sum -= value}},state:{sum:0, //当前的和school:'中国',subject:'Vue',},getters:{bigSum(state){return state.sum*10}},
}

person.js文件,人员列表相关的配置
关键配置:namespaced:true

import axios from 'axios'
//人员管理相关配置
export default {namespaced:true,actions:{addPersonWang(context,value){if(value.name.indexOf('王') === 0){context.commit('ADD_PERSON',value)}else{alert('添加的人必须姓王!')}},addPersonServer(context){axios.get('https://api.uixsj.cn/hitokoto/get?type=social').then(response => {context.commit('ADD_PERSON',{id:nanoid(),name:response.data})},error => {alert(error.message)})}},mutations:{ADD_PERSON(state,value){console.log('mutations中的ADD_PERSON被调用了')state.personList.unshift(value)}},state:{personList:[{id:'001',name:'张三'}]},getters:{firstPersonName(state){return state.personList[0].name}},
}

index.js中引入count.jsperson.js文件
关键配置:modules

//该文件用于创建vuex中最为核心的store//引入Vue
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'import countOptions from './count'
import personOptions from './person'Vue.use(Vuex);//创建并暴露store
export default new Vuex.Store({modules:{countAbout:countOptions,personAbout:personOptions}
});

vc组件中使用配置
1、常规写法
关键编码:
带上personAbout
this.$store.state.personAbout.personList
this.$store.commit('personAbout/ADD_PERSON',personObj)

        computed:{personList(){return this.$store.state.personAbout.personList},sum(){return this.$store.state.countAbout.sum},firstPersonName(){return this.$store.getters['personAbout/firstPersonName']}},methods: {add(){const personObj = {id:nanoid(),name:this.name}this.$store.commit('personAbout/ADD_PERSON',personObj)this.name = ''},addWang(){const personObj = {id:nanoid(),name:this.name}this.$store.dispatch('personAbout/addPersonWang',personObj)this.name = ''},addPersonServer(){this.$store.dispatch('personAbout/addPersonServer')}},

2、实用mapXxx写法

		computed:{//借助mapState生成计算属性,从state中读取数据。(数组写法)...mapState('countAbout',['sum','school','subject']),...mapState('personAbout',['personList']),//借助mapGetters生成计算属性,从getters中读取数据。(数组写法)...mapGetters('countAbout',['bigSum'])},methods: {//借助mapMutations生成对应的方法,方法中会调用commit去联系mutations(对象写法)...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),//借助mapActions生成对应的方法,方法中会调用dispatch去联系actions(对象写法)...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})},

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

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

相关文章

【Mybatis】TypeHandler使用

引言 在使用MyBatis进行项目开发时,我们经常会遇到Java类型与数据库类型不匹配的情况。为了解决这一问题,MyBatis提供了一个强大的机制——TypeHandler。TypeHandler是MyBatis中一个用于处理Java类型和数据库类型转换的组件,它在MyBatis进行…

【微信小程序讲解——必看】

微信小程序详细介绍 1. 微信小程序2. 基本概念3. 开发方式4. 特点5. 功能范围6. 使用场景7. 用户界面8. API支持9. 安全与隐私10. 上线流程11. 运营规则 1. 微信小程序 微信小程序是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用…

There will be “7“ later: Interpretation of next-generation Wi-Fi technology

With the Wi-Fi Alliance announcing the launch of Wi-Fi 7-related certifications, we can also start talking about the new successor to Wi-Fi 6 three years after its launch. What is Wi-Fi 7? What benefits does it bring? These questions about Wi-Fi 7 will b…

Active Directory 的密码管理策略

员工使用的密码可以决定或破坏组织中的数据安全性,但是,知道员工通常不遵循良好的密码卫生习惯也就不足为奇了。从在本机工具(如 Windows Active Directory 组策略)中设置弱密码和通用密码到宽松的密码策略规则,有几个…

面试指南:C++之STL知识点

相关系列文章 面试指南:C之STL知识点 C内存分配策略 深入理解STL空间分配器(一): new_allocator 深入理解STL空间分配器(二):mt_allocator 深入理解STL空间分配器(三):pool_allocator深入理解STL空间分配器(四):bitmap_allocator …

钉钉小程序 没有调用该接口的权限

钉钉小程序 没有调用该接口的权限 problem 钉钉官方自带免登陆小程序 后端接口报错 {"errcode":60011,"errmsg":"没有调用该接口的权限,接口权限申请参考:https://open.dingtalk.com/document/orgapp-server/add-api-permiss…

【C++】---static成员(附OJ题)

一、静态成员变量 1.概念: 声明为static的类成员称为类的静态成员,静态成员分为两种: (1)static修饰的成员变量:静态成员变量 (2)static修饰的成员函数:静态成员函数 …

【云原生系列之kubernetes】--Ingress使用

service的缺点: 不支持基于URL等机制对HTTP/HTTPS协议进行高级路由、超时、重试、基于流量的灰度等高级流量治理机制难以将多个service流量统一管理 1.1ingress的概念 ingress是k8s中的一个对象,作用是如何将请求转发到service的规则ingress controlle…

如何构建自己的Docker镜像?

Docker镜像是由一系列只读层叠加而成的,这些层表示了Dockerfile中的每条指令。构建自己的Docker镜像主要涉及编写Dockerfile文件、使用docker build命令进行构建,以及可选地将镜像推送到Docker镜像仓库。下面将详细阐述构建Docker镜像的整个过程。 一、…

博客摘录「 Python面试宝典」2024年2月20日

Python 中的可变对象和不可变对象? 可变对象是指在创建后可以被修改的对象,主要包括列表(list)、字典(dict)和集合(set)。可变对象可以通过方法或运算符改变其内部的值或结构。 不…

关于TypeReference的使用

关于TypeReference的使用 在项目中,有遇到TypeReference的使用,其主要在字符串转对象过程中,对于序列化和反序列化中也有效果,将字符串转换成自定义对象. 1 说明 以常见为例,在com.alibaba.fastjson包下面的TypeReference类,是指Type的Reference,表示某类型的一个指…

Code Composer Studio (CCS) - 文件比较

Code Composer Studio [CCS] - 文件比较 References 鼠标单击选中一个文件,再同时按住 Ctrl 鼠标左键来选中第二个文件,在其中一个文件上鼠标右击选择 Compare With -> Each Other. References [1] Yongqiang Cheng, https://yongqiang.blog.csdn.n…

UE5 C++ 静态加载资源和类

一.上篇文章创建组件并绑定之后 在Actor中加载初始化了组件&#xff0c;现在在组件中赋值。使用static ConstructorHelpers::FObjectFinder<T>TempName(TEXT("Copy Reference"))&#xff1b;再用TempName.Object //静态加载资源static ConstructorHelpers::FOb…

戴尔Dell R740服务器开机冒烟亮黄灯故障维修

今天分享的是一台过保修期的DELL PowerEdge R740服务器开机冒烟的维修案例。先上图&#xff1a; 接到用户报修后工程师立即响应&#xff0c;由于用户也是刚开工第一天服务器开机就出现了这种祥龙吐雾的祥兆&#xff0c;导致工厂业务流程无法正常使用&#xff0c;这台机器在东莞…

【plt.hist绘制直方图】:从入门到精通,只需一篇文章!【Matplotlib可视化】

【&#x1f4ca;plt.pie绘制直方图】&#xff1a;从入门到精通&#xff0c;只需一篇文章&#xff01;【Matplotlib可视化】&#xff01; 利用Matplotlib进行数据可视化示例 &#x1f335;文章目录&#x1f335; &#x1f4c8; 一、引言&#x1f50d; 二、plt.hist()函数基础&am…

flink state原理,TTL,状态后端,数据倾斜一文全

flink state原理 1. 状态、状态后端、Checkpoint 三者之间的区别及关系&#xff1f;2 算子状态与键控状态的区别2.1 算子状态2.2 键控状态2.3 算子状态api2.4 键控状态api 3 HashMapStateBackend 状态后端4 EmBeddedRocksDbStateBackend 状态后端5 状态数据结构介绍5.1 算子状态…

辽宁博学优晨教育科技有限公司视频剪辑培训专业之选

随着数字时代的到来&#xff0c;视频剪辑技术已成为各行各业不可或缺的一项技能。为了满足市场需求&#xff0c;辽宁博学优晨教育科技有限公司&#xff08;以下简称“博学优晨”&#xff09;推出了专业的视频剪辑培训课程&#xff0c;旨在为广大学员提供系统、高效的学习机会。…

Docker vs VM

关于应用程序的托管和开发&#xff0c;市场中的技术和产品琳琅满目。对比 Docker 和 VM&#xff0c;如何取舍&#xff1f;这主要由自身团队的因素决定&#xff0c;在选择 Docker 的情况下&#xff0c;你需要保证程序可在容器和虚拟机中运行。另外&#xff0c;成本和易用性也是重…

C/C++ MACOS、Windows、Linux、HarmonyOS 平台宏判断

本文提供经过三个平台一份代码编译无故障 C/C 工程移植通过&#xff0c;所以无需担心宏在这些平台上面无法使用。 #include <stdio.h> #include <stddef.h>#if !defined(NULL) #define NULL 0 #endif#if defined(_DEBUG) #if !defined(DEBUG) #define DEBUG 1 #end…

【视频编解码】M-JPEG压缩、H.264压缩 对比

简介 参考这篇文章&#xff1a;https://blog.csdn.net/qq_41248872/article/details/83590337 写的比较好&#xff0c;这里就不赘述了。 我们在视频传输的时候&#xff0c;需要压缩&#xff0c;常见的压缩包括: jpeg 压缩h264 压缩 当然使用最多的还是 264, 毕竟他的压缩比…