Vuex核心知识整理

目录

1 搭建vuex环境

2 求和案例

3 getters 配置项

4 mapState 和 mapGetters

5 mapMutations 和 mapActions

6 Vuex 模块化


1 搭建vuex环境

vuex工作原理图(摘自官网

什么时候使用Vuex:

1.当多个组件依赖于统一状态

2.来自不同组件的行为需要变更同一状态 


(1). 首先再src目录下创建store文件夹,然后创建index.js文件(该文件用于创建 vuex 中最为核心的 store), 然后在main.js中引入这个index.js文件

【index.js】

/* 该文件用于创建 vuex 中最为核心的 store */
// 引入Vue
import Vue from 'vue'// 引入vuex
import Vuex from 'vuex'// 使用插件
Vue.use(Vuex)// 1. 准备actions: 用于响应组件中的动作
const actions = {/* 没有业务逻辑的,可以直接跳过这步,直接commit */// jia(context, num) {//     context.commit('JIA', num)// },// jian(context, num) {//     context.commit('JIAN', num)// },/* 有业务逻辑的 */jiaOdd(context, num) {if (context.state.sum % 2) {context.commit('JIA', num)}},jiaWait(context, num) {setTimeout(() => {context.commit('JIA', num)}, 1000)},
}// 2. 准备mutations: 用于操作数据(state)
const mutations = {JIA(state, num) {// console.log(num)state.sum += num},JIAN(state, num) {state.sum -= num}
}// 3. 准备state: 用于保存数据
const state = {sum: 0,  // 当前的和
}/* 创建并暴露store */
export default new Vuex.Store({actions,mutations,state
})

2 求和案例

【Count】

<template><div><h1>当前求和为:{{ $store.state.sum }}</h1><select v-model.number="num"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select><button @click="add">+</button><button @click="sub">-</button><button @click="addIfOdd">当前求和为奇数再加</button><button @click="addWait">等一等再加</button></div>
</template><script>export default {name: 'Count',data() {return {num: 1, //用户选择的数字}},methods: {/* 没有业务处理,直接commit, 联系mutations */add() {this.$store.commit('JIA', this.num)},sub() {this.$store.commit('JIAN', this.num)},/* 有业务处理,先dispatch, 联系actions,再commit, 联系mutations */addIfOdd() {this.$store.dispatch('jiaOdd', this.num) },addWait() {this.$store.dispatch('jiaWait', this.num)}},}</script><style>button {margin-left: 8px;}
</style>

在组件中使用处理过后的数据时(比如上方的sum ),用 {{ $store.state.sum }} 


3 getters 配置项

【index.js】

......
// 3. 准备state: 用于保存数据
const state = {sum: 0,  // 当前的和school: '北京大学',subject: '计算机'
}// getters: 用于将state中的数据进行加工
const getters = {bigSum(state) {return state.sum * 10}
}/* 创建并暴露store */
export default new Vuex.Store({actions,mutations,state,getters
})

【Count】

在组件中使用getters中加工后的数据 

<h3>放大十倍的和为:{{ $store.getters.bigSum }}</h3>

4 mapState 和 mapGetters

在上述的案例中,当我们需要使用state或者getters中的数据时,在组件中的模板中,需要写 $store.state.xx, 这样写的话,不够精简。以下将介绍几种方法,利用计算属性去处理这种不足之处

【state和getters中的数据】

// 3. 准备state: 用于保存数据
const state = {sum: 0,  // 当前的和school: '北京大学',subject: '计算机'
}// 。getters: 用于将state中的数据进行加工
const getters = {bigSum(state) {return state.sum * 10}
}

【在组件中导入】

import { mapState, mapGetters } from 'vuex'

1. 获取state中的数据: 

【方法1】靠程序员自己手写计算属性

.......
computed: {/* 1.靠程序员自己去写计算属性 */he() {return this.$store.state.sum},xuexiao() {return this.$store.state.school},xueke() {return this.$store.state.subject},
}

<h1>当前求和为:{{ sum }}</h1>
<h3>我在:{{ xuexiao}}, 学习{{ xueke}}</h3>

【方法2】使用vuex的mapState生成计算属性,从state中获取数据  (对象写法)

computed: {// ..........mapState({he:'sum', xuexiao:'school', xueke:'subject'}),  // 使用扩展运算符展开对象
}

【方法3】使用vuex的mapState生成计算属性,从state中获取数据  (数组写法)

computed: {// .........mapState(['sum', 'school', 'subject']),
}

使用数组写法的前提是:计算属性的属性名和state中的数据的名称是相同的


2. 获取getters中的数据: 

【方法1】使用vuex的mapGetters生成计算属性,从getters中获取数据  (对象写法)

computed: {// .........mapGetters({bigSum:'bigSum'})
}

【方法2】使用vuex的mapGetters生成计算属性,从getters中获取数据  (数组写法)

computed: {// .........mapGetters(['bigSum'])
}

前提和上面一样


5 mapMutations 和 mapActions

当我们在组件中想要联系actions 或者 mutations 时,我们需要使用this.$store.dispatch(...) 或者 this.$store.commit(...) 这样写的话,如果有多个就会写很多重复的 this.$store.dispatch ......

所以我们可以使用mapMutations和mapActions来解决这种问题

【在组件中导入】

import { mapMutations, mapActions } from 'vuex'

1. 联系mapMutations:

【方法1】借助vuex的mapMutations生成方法,方法中调用commit方法去联系 mutations (对象的写法)

methods: {// .........mapMutations({add: 'JIA', sub: 'JIAN'}),
}

【方法2】借助vuex的mapMutations生成方法,方法中调用commit方法去联系 mutations (数组的写法)

methods: {// ..........mapMutations(['JIA', 'JIAN']),  // 函数名也要改成对应的JIA、JIAN
}

2. 联系mapActions:

【方法1】借助mapActions 对象的写法

methods: {// .........mapActions({addIfOdd: 'jiaOdd', addWait: 'jiaWait'})
}

【方法2】借助mapActions 数组的写法

methods: {// ......    ...mapActions(['addIfOdd', 'addWait'])
}

但是使用上述方法时,并不会传递参数,如果不指定参数的话,会默认传递事件对象 event, 所以计算结果会出错,所以我们需要在 <template></template>中指定传递的参数

    <button @click="add(num)">+</button><button @click="sub(num)">-</button><button @click="addIfOdd(num)">当前求和为奇数再加</button><button @click="addWait(num)">等一等再加</button>

6 Vuex 模块化

【index.js】

/* 该文件用于创建 vuex 中最为核心的 store */
// 引入Vue
import Vue from 'vue'// 引入vuex
import Vuex from 'vuex'import axios from 'axios'import nanoid from 'nanoid'// 使用插件
Vue.use(Vuex)/* 1.求和功能相关的配置 */
const countOptions = {namespaced: 'true',actions: {jiaOdd(context, num) {if (context.state.sum % 2) {context.commit('JIA', num)}},jiaWait(context, num) {setTimeout(() => {context.commit('JIA', num)}, 1000)},},mutations: {JIA(state, num) {// console.log(num)state.sum += num},JIAN(state, num) {state.sum -= num},ADD_PERSON(state, person) {state.personList.unshift(person)},},state: {sum: 0,  // 当前的和school: '北京大学',subject: '计算机',},getters: {bigSum(state) {return state.sum * 10}}
}/* 2.人员功能相关的配置 */
const personOptions = {namespaced: 'true',actions: {addPersonxie(context, person) {if (person.name.indexOf('谢') === 0) {context.commit('ADD_PERSON', person)} 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 => {console.log(error.message)})}},mutations: {ADD_PERSON(state, person) {state.personList.unshift(person)}},state: {personList: [{id:'001', name:'zs'}]},getters: {firstPersonName(state) {return state.personList[0].name}}
}/* 创建并暴露store */
export default new Vuex.Store({modules: {count: countOptions,person: personOptions}
})

使用模块化时,state中就变成了count 和 person两个被导出的模块,而具体的数据就在对应的模块中

在模板中就可以使用以下方式使用数据  {{ count.xx}} 、 {{ person.xx}}

    <h1>当前求和为:{{ count.sum }}</h1><h2>放大十倍的和为:{{ bigSum }}</h2><h3>我在:{{ count.school }}, 学习{{ count.subject }}</h3><h4 style="color: red;">Perosn组件的总人数是: {{ person.personList.length }}</h4>

但是这样写的话,模板中的写法还是过于繁琐,所以我们可以将所需要的数据指定所在的模块中,然后就可以直接用了。

// 这里以对象的写法为例
...mapState('count', ['sum', 'school', 'subject']),  // 需要配置namespaced:true


         methods: {...mapMutations('count', {add: 'JIA', sub: 'JIAN'}),...mapActions('count', {addIfOdd: 'jiaOdd', addWait: 'jiaWait'})},

模块化有一个好处就是,可以将每一个模块放入一个.js文件中,然后在store/index.js 文件中引入,这样方便多个程序员根据自己的需要操作对应放入模块

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

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

相关文章

第三百五十一回

文章目录 1. 概念介绍2. 获取方法3. 示例代码4. 对比与总结4.1 横向对比4.2 内容总结 我们在上一章回中介绍了"如何获取当前系统语言"相关的内容&#xff0c;本章回中将介绍获取当前时区.闲话休提&#xff0c;让我们一起Talk Flutter吧。 1. 概念介绍 我们使用的北京…

解决:docker创建Redis容器成功,但无法启动Redis容器、也无报错提示

解决&#xff1a;docker创建Redis容器成功&#xff0c;但无法启动Redis容器、也无报错提示 一问题描述&#xff1a;1.docker若是直接简单使用run命令&#xff0c;但不挂载容器数据卷等参数&#xff0c;则可以启动Redis容器2.docker复杂使用run命令&#xff0c;使用指定redis.co…

Kubernetes实战:Kubernetes中网络插件calico Daemon Sets显示异常红色

目录 一、排查步骤与解决方案1.1、POD排查问题定位1.2、针对问题解决错误1.3、继续针对问题解决错误 一、排查步骤与解决方案 1.1、POD排查问题定位 我的k8s集群由3个节点组成的&#xff0c;calico在每个节点上都有一个pod,通过kubectl get pod -A命令发现有一个pod的READY 为…

CVE-2022-24652 漏洞复现

CVE-2022-24652 开题 后台管理是thinkphp的&#xff0c;但是工具没检测出漏洞。 登陆后界面如下&#xff0c;上传头像功能值得引起注意 这其实就是CVE-2022-24652&#xff0c;危险类型文件的不加限制上传&#xff0c;是文件上传漏洞。漏洞路由/user/upload/upload 参考文章&a…

web 发展阶段 -- 详解

1. web 发展阶段 当前处于 移动 web 应用阶段。也是个风口&#xff08;当然是针对有能力创业的人来说的&#xff09;&#xff0c;如 抖音、快手就是这个时代的产物。 2. web 发展阶段引出前后端分离的过程 2.1 传统开发方式 2.2 前后端分离模式 衍生自移动 web 应用阶段。 3.…

YOLOv8改进 | Neck篇 | 当SDI碰上BiFPN形成全新的特征金字塔网络(全网独家创新)

一、本文介绍 本文给大家带来的改进机制是利用多层次特征融合模块(SDI)配上经典的加权双向特征金字塔网络Bi-FPN形成一种全新的Neck网络结构,从而达到二次创新的效果,其中(SDI)模块的主要思想是通过整合编码器生成的层级特征图来增强图像中的语义信息和细节信息。Bi-FPN…

VMwareWorkstation17.0虚拟机安装搭建Windows 11虚拟机(完整图文详细步骤教程)

VMwareWorkstation17.0虚拟机安装搭建Windows 11虚拟机&#xff08;完整图文详细步骤教程&#xff09; 一、下载Windows11二、配置Windows11虚拟机机器环境三、启动Windows11系统 一、下载Windows11 【点击打开最全面的Windows 11原版系统镜像下载地址】 https://blog.csdn.ne…

463. Island Perimeter(岛屿的周长)

问题描述 给定一个 row x col 的二维网格地图 grid &#xff0c;其中&#xff1a;grid[i][j] 1 表示陆地&#xff0c; grid[i][j] 0 表示水域。 网格中的格子 水平和垂直 方向相连&#xff08;对角线方向不相连&#xff09;。整个网格被水完全包围&#xff0c;但其中恰好有…

MySQL数据表的约束

已经一个星期没更了&#xff0c;因为过年嘛&#xff0c;比较忙&#xff0c;我玩心也大&#xff0c;就没继续更新&#xff0c;在这里给大家道歉&#xff0c;也祝大家新的一年快快乐乐&#xff0c;新年快乐。 为防止数据表中插入错误的数据&#xff0c;MySQL定义了一些规则维护数…

人工智能专题:2024亚太地区生成式人工智能应用与监管报告

今天分享的是人工智能系列深度研究报告&#xff1a;《人工智能专题&#xff1a;2024亚太地区生成式人工智能应用与监管报告》。 &#xff08;报告出品方&#xff1a;德勤&#xff09; 报告共计&#xff1a;20页 来源&#xff1a;人工智能学派 知识更新&#xff1a;了解传统…

代码随想录算法训练营第32天| 122.买卖股票的最佳时机 II、55. 跳跃游戏、45.跳跃游戏 II

文章目录 Leetcode 122.买卖股票的最佳时机 IILeetcode 55. 跳跃游戏Leetcode 45.跳跃游戏 II Leetcode 122.买卖股票的最佳时机 II 题目链接&#xff1a;Leetcode 122.买卖股票的最佳时机 II 题目描述&#xff1a; 给定一个数组&#xff0c;它的第 i个元素是一支给定股票第i天…

【笔记】Helm-5 Chart模板指南-13 调试模板

调试模板 调试模板可能很棘手&#xff0c;因为渲染后的模板发送了kubernetes API server&#xff0c;可能会以格式化以外的原因拒绝YAML文件。 以下命令有助于调试&#xff1a; 1、helm lint 是验证chart是否遵循最佳实践的首选工具。 2、helm template --debug在本地测试渲…

IP地址+子网掩码+CIDR学习笔记

目录 一、IP地址 1、表示方法&#xff1a; 2、特殊IP地址 二、子网掩码 1、判断网络位和主机位 2、子网划分 三、无分类编址CIDR 1、CIDR路由汇聚 汇聚规则&#xff1a; 汇聚ID&#xff1a; 2、最佳路由匹配原则 一、IP地址 1、表示方法&#xff1a; 机器中存放的…

(免费领源码)java#springboot#mysql医院自助服务系统74853-计算机毕业设计项目选题推荐

目 录 摘要 1 绪论 1.1研究意义 1.2研究背景 1.3springboot框架介绍 1.3论文结构与章节安排 2 医院自助服务系统系统分析 2.1 可行性分析 2.2 系统流程分析 2.2.1 数据流程 3.3.2 业务流程 2.3 系统功能分析 2.3.1 功能性分析 2.3.2 非功能性分析 2.4 系统用例分…

JWT登录验证前后端设计与实现笔记

设计内容 前端 配置全局前置路由守卫axios拦截器登录页面和主页 后端 JWT的封装登录接口中间件放行mysql数据库的连接 详细设计 路由设计 配置全局前置守卫&#xff0c;如果访问的是登录页面则放行&#xff0c;不是则进入判断是否有token&#xff0c;没有则拦截回到登录…

《Go 简易速速上手小册》第10章:微服务与云原生应用(2024 最新版)

文章目录 10.1 构建微服务架构 - 探索 Go 语言的微观世界10.1.1 基础知识讲解10.1.2 重点案例&#xff1a;订单处理系统订单服务测试服务 10.1.3 拓展案例 1&#xff1a;用户认证服务安装所需的包实现用户模型和存储实现 JWT 生成和验证实现认证服务测试服务 10.1.4 拓展案例 2…

使用函数实现数组操作

使用函数实现数组操作 创建一个整形数组&#xff0c;完成对数组的操作 实现函数init() 初始化数组为全0 实现print() 打印数组的每个元素 实现reverse() 函数完成数组元素的逆置。 要求&#xff1a;自己设计以上函数的参数&#xff0c;返回值。 void Init(int arr[], int sz…

HarmonyOS—@State装饰器:组件内状态

State装饰的变量&#xff0c;或称为状态变量&#xff0c;一旦变量拥有了状态属性&#xff0c;就和自定义组件的渲染绑定起来。当状态改变时&#xff0c;UI会发生对应的渲染改变。 在状态变量相关装饰器中&#xff0c;State是最基础的&#xff0c;使变量拥有状态属性的装饰器&a…

基于python+django+mysql的小区物业管理系统

该系统是基于pythondjango开发的小区物业管理系统。适用场景&#xff1a;大学生、课程作业、毕业设计。学习过程中&#xff0c;如遇问题可以在github给作者留言。主要功能有&#xff1a;业主管理、报修管理、停车管理、资产管理、小区管理、用户管理、日志管理、系统信息。 演示…

mybatis整合plugin处理

1、注入SqlSessionFatory时候会初始化所有拦截器&#xff0c;2、发生在handle时期&#xff0c;将plugin加入到org.apache.ibatis.plugin.InterceptorChain的链路当中&#xff0c;3、method invoke方法执行拦截器中的拦截方法 &#xff08;比如myabatis plus 里面的分库分表&…