(三十九)Vue之集中式的状态管理机制Vuex

目录

  • 概念
    • vuex的核心概念
      • State(状态)
      • Getters(获取器)
      • Mutations(突变)
      • Actions(动作)
  • 搭建vuex环境
  • 基本使用
  • getters的使用

上一篇:(三十八)Vue之插槽Slots

概念

Vuex是一个专为Vue.js应用程序开发的状态管理模式。对vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信。它可以集中管理Vue.js应用程序中的所有组件的状态,使得状态的管理和共享变得更加简单和可维护。

在Vue.js中,组件之间的数据传递通常是通过props和事件来实现的。然而,随着应用程序的复杂性增加,组件之间的状态共享和数据传递变得更加困难。Vuex提供了一个集中式的状态管理机制,将组件的共享状态抽离出来,以一个全局的状态树来管理。

vuex的核心概念

在这里插入图片描述
Vuex的核心概念包括State、Getters、Mutations和Actions,并且支持模块化组织。通过这些概念,我们可以更好地组织和管理应用程序的状态,提高开发效率和可维护性。您可以在Vuex的官方文档(https://vuex.vuejs.org/)中找到更详细的解释、示例和代码片段

State(状态)

State是应用程序的全局状态。它类似于组件中的data属性,但是不同的是,State是全局共享的,可以在任何组件中访问。

在Vuex的图示中,State通常表示为一个状态树,它是一个JavaScript对象,包含应用程序的所有状态数据。

Getters(获取器)

Getters用于从State中派生出新的状态。它类似于Vue组件中的计算属性,可以对State进行计算和过滤,然后在组件中使用。

在Vuex的图示中,Getters通常表示为箭头指向State的计算属性。

Mutations(突变)

Mutations用于修改State中的数据。它是同步的操作,用于更新状态树中的数据。
在Vuex的图示中,Mutations通常表示为箭头指向State的方法,表示通过Mutations来修改State的数据。

Actions(动作)

Actions用于执行异步操作和提交Mutations。它可以包含任意异步操作,如API请求、定时器等。
Actions通过提交Mutations来间接修改State的数据
在Vuex的图示中,Actions通常表示为箭头指向Mutations的方法,表示通过Actions来触发Mutations的执行。

搭建vuex环境

第一步:安装vuex

请注意Vuex的版本跟vue的版本有关系:

  • vue2只能使用vuex3版本
  • vue3只能使用vuex4版本

以npm为例:如果使用npm install vuex命令默认安装最新版本,也就是vuex4,如果需要安装vuex3版本需要加个版本npm install vuex@3

第二步:引入vuex

import Vuex from 'vuex'

第三步:使用vuex

Vue.use(Vuex)

这一步之后,在Vue和VueComponent身上就多了个$store,并且在new Vue的时候就可以配置一个store对象了

第四步:创建Store实例

首先需要创建store的文件,有两种方式:
第一种:在src文件夹下创建vuex文件夹,并创建store.js文件
第二种(官网写法):在src文件夹下创建store文件夹,并创建index.js文件

第二步和第三步也可以写在这个store文件里面

//引入Vue核心库import Vue from 'vue'//引入Vueximport Vuex from 'vuex'//应用Vuex插件Vue.use(Vuex)//准备actions对象——响应组件中用户的动作const actions = {}//准备mutations对象——修改state中的数据const mutations = {}//准备state对象——保存具体的数据const state = {}//创建并暴露storeexport default new Vuex.Store({actions,mutations,state})

第五步:在main.js中创建vm时传入store配置项

......//引入storeimport store from 'xxx'......//创建vmnew Vue({el:'#app',render: h => h(App),store})

基本使用

以一个求和案例为例:

store文件

//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'//准备actions对象——响应组件中用户的动作
const actions = {jia(context,value){console.log('actions中的jia被调用',context,value)context.commit('JIA',value)},jian(context,value){context.commit('JIAN',value)},jiaOdd(context,value){if (context.state.sum % 2){context.commit('JIA',value)}},jiaWait(context,value){setTimeout(()=>{context.commit('JIA',value)},500)}
}
//准备mutations对象——修改state中的数据
const mutations = {JIA(state,value){console.log('mutations中的JIA被调用了',state,value)state.sum += value},JIAN(state,value){console.log('mutations中的JIAN被调用了',state,value)state.sum -= value}
}
//准备state对象——保存具体的数据
const state = {sum:0
}
//应用Vuex插件
Vue.use(Vuex)//创建并暴露store
export default new Vuex.Store({actions,mutations,state
})

Count组件:

<template>
<div><h1>当前求和为:{{$store.state.sum}}</h1><select v-model.number="n"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select><button @click="increment">+</button><button @click="decrement">-</button><button @click="incrementOdd">当前求和为奇数再加</button><button @click="incrementWait">等一等再加</button>
</div>
</template><script>
export default {// eslint-disable-next-line vue/multi-word-component-namesname: "Category",props:['listData','title'],data() {return {n:1,//用户选择的数字/*sum:0*/}},methods:{//通过mutationsincrement(){this.$store.commit('JIA',this.n)},decrement(){this.$store.commit('JIAN',this.n)},//通过actionsincrementOdd(){this.$store.dispatch('jiaOdd',this.n)},incrementWait(){this.$store.dispatch('jiaWait',this.n)}}
}
</script><style scoped>
</style>

组件中读取vuex中的数据:$store.state.xxx

组件中修改vuex中的数据:$store.dispatch('action中的方法名',数据)$store.commit('mutations中的方法名',数据)

getters的使用

当state中的数据需要经过加工后再使用时,可以使用getters加工。

使用方法:在store.js中追加getters配置

   const getters = {bigSum(state){//例如想将一个数乘以10return state.sum * 10}}//创建并暴露storeexport default new Vuex.Store({......getters})

组件中读取数据:$store.getters.bigSum

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

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

相关文章

ASCII码表介绍

一、ASCII码是什么 ASCII&#xff08;American Standard Code for Information Interchange&#xff0c;美国信息交换标准代码&#xff09;是基于拉丁字母的一套电脑编码系统。它可分为基于7位二进制数的标准版本和基于8位二进制数的扩展版本&#xff0c;标准版本主要用于显示现…

CANable USB转CAN适配器固件的安装(ubuntu20.04)

CANable USB转CAN适配器固件和驱动的安装(以candlelight和pcan为例)ubuntu20.04 candlelight candlelight是什么 Candlelight是CANable设备的固件之一&#xff0c;用于将CANable设备转换为本机CAN设备&#xff0c;无需使用slcand。它允许CANable设备直接在Linux系统上以本机C…

南卡、漫步者和Oladance开放式耳机哪个强!无广甄选测评!

在当前市场上&#xff0c;因为许多质量不行&#xff0c;音质平平的开放式耳机让消费者的选择陷入了困难。这些品质低下的产品既无法提供优秀的音频享受&#xff0c;长期佩戴还可能对使用者的听力健康造成健康问题。 作为一名经验丰富的音频设备评测专家&#xff0c;我建议在选…

2563. 统计公平数对的数目

题目&#xff1a; 给你一个下标从 0 开始、长度为 n 的整数数组 nums &#xff0c;和两个整数 lower 和 upper &#xff0c;返回 公平数对的数目 。 如果 (i, j) 数对满足以下情况&#xff0c;则认为它是一个 公平数对 &#xff1a; 0 < i < j < n&#xff0c;且 l…

LeetCode 算法:轮转数组c++

原题链接&#x1f517;&#xff1a;轮转数组 难度&#xff1a;中等⭐️⭐️ 题目 给定一个整数数组 nums&#xff0c;将数组中的元素向右轮转 k 个位置&#xff0c;其中 k 是非负数。 示例 1: 输入: nums [1,2,3,4,5,6,7], k 3 输出: [5,6,7,1,2,3,4] 解释: 向右轮转 1 步…

Yolo-World训练过程中使用wandb进行可视化

训练过程可视化有两种方式&#xff1a;wandb和tensorboard&#xff0c;这里我采用的是wandb&#xff0c;想要在训练过程中调用wandb只需要在要训练的配置文件&#xff08;如yolo_world_v2_l_vlpan_bn_sgd_1e-3_40e_8gpus_finetune_coco.py&#xff09;中加上一行代码即可&#…

9.1.3 简单介绍单阶段模型YOLO、YOLOv2、YOLO9000、YOLOv3的发展过程

9.1.3 简单介绍单阶段模型YOLO、YOLOv2、YOLO9000、YOLOv3的发展过程 前情回顾&#xff1a;9.1.2 简单介绍两阶段模型R-CNN、SPPNet、Fast R-CNN、Faster R-CNN的发展过程 摘要 YOLOYOLOv2YOLO9000YOLOv3基本思想使用一个端到端的卷积神经网络直接预测目标的类别和位置针对YOL…

【源码】SpringBoot编程式事务使用及执行原理

Spring事务 1、【源码】SpringBoot事务注册原理 2、【源码】Spring Data JPA原理解析之事务注册原理 3、【源码】Spring Data JPA原理解析之事务执行原理 4、【源码】SpringBoot编程式事务使用及执行原理 前言 《Spring事务系列》的前面几篇博文讲解了通过Transactional注…

FPGA - 滤波器 - FIR滤波器设计

一&#xff0c;数字滤波器 滤波器是一种用来减少或消除干扰的器件&#xff0c;其功能是对输入信号进行过滤处理得到所需的信号。滤波器最常见的用法是对特定频率的频点或该频点以外的频率信号进行有效滤除&#xff0c;从而实现消除干扰、获取某特定频率信号的功能。一种更广泛的…

如何高效管理和监控 Elasticsearch 别名及索引?

0、引言 在 Elasticsearch 项目中&#xff0c;管理和监控索引是开发者的一项重要任务。 尤其是当我们需要在项目的管理部分展示索引和别名的统计信息时&#xff0c;了解如何有效地列出这些别名和索引显得尤为重要。 本篇博客将介绍几种在 Elasticsearch 中列出别名和索引的方法…

【Hudi】核心概念-基本概念

目录 基本概念时间轴(TimeLine)Instant action:在表上执行的操作类型Instant timeState两个时间概念 文件布局(File Layout)索引(Index)原理索引选项全局索引与非全局索引索引的选择策略 表类型(Table Types)查询类型Snapshot QueriesIncremental QueriesRead Optimized Querie…

集合并集交集差集【工具类】

一、使用Stream流进行处理 在Java开发中&#xff0c;对于集合的操作是非常常见的&#xff0c;特别是交集、并集和差集这样的操作。这些操作可以通过Java 8中的Stream API来实现。 •交集&#xff1a;取两个集合中相同的部分。例如&#xff0c;如果我们有两个List集合&#xff…

【2024最新精简版】Redis面试篇

文章目录 什么是红锁Redis有哪些框架&#xff1f;你们项目中哪里用到了Redis ?Redis的常用数据类型有哪些 ?Redis的数据持久化策略有哪些 ?Redis的数据过期策略有哪些 ?Redis的数据淘汰策略有哪些 ?你们使用Redis是单点还是集群 ? 哪种集群 ?Redis集群有哪些方案, 知道嘛…

iOS--oc对象,类,和元类本质

iOS--oc对象&#xff0c;类&#xff0c;和元类本质 前言实例对象的具体结构自定义类对象的结构继承关系 类信息的存放对isa、superclass总结 前言 最近在学习runtime的过程中&#xff0c;发现其中消息发送-动态方法解析-消息转发中涉及到了大量的类与对象的底层知识&#xff0…

在linux系统上挂载新硬盘

服务器的硬盘空间不够了&#xff0c;自己重新安装了一个硬盘&#xff0c;需要挂载&#xff0c;因为只是用来存放数据&#xff0c;所以不需要分区&#xff0c;直接挂载就可以 #查看当前所有硬盘 sudo fdisk -l #用于显示文件系统的磁盘空间使用情况 df -h发现一个/dev/nvme0n1 …

mysql索引失效的几种情况

1、对列进行计算或者是使用函数&#xff0c;则该列的索引会失效 如&#xff1a;substring(字段名,1,2)‘xxx’&#xff1b; 如&#xff1a;select * from test where id-19;//错误的写法&#xff1b; select * from test where id10; //正确的写法 &#xff1b; 2、某些情况下…

java.nio.charset.UnmappableCharacterException

问题 java.lang.IllegalArgumentException: java.nio.charset.UnmappableCharacterException: Input length 1 解释为编码转换有问题 问题错在位置 非汉字存在 打包的时候就会报异常

TikTok限流封号要如何处理

随着TikTok在全球范围内的运营和管理越来越规范&#xff0c;对于违规行为的处罚也日趋严格。其中&#xff0c;限流和封号是两种常见的处罚措施。那么&#xff0c;当TikTok账号遭遇限流或封号时&#xff0c;我们应该如何处理呢&#xff1f; 一、了解限流和封号的原因 在处理Ti…

Zoom会议网络连接不稳定怎么办?

随着远程办公和在线会议的普及&#xff0c;Zoom已成为许多企业的重要办公工具。然而&#xff0c;国内企业在使用Zoom进行线上会议时&#xff0c;常常面临网络不稳定和中断的问题&#xff0c;这不仅影响会议效率&#xff0c;还可能给企业带来损失。那么&#xff0c;Zoom会议网络…

meilisearch的分页

Elasticsearch 做为老牌搜索引擎&#xff0c;功能基本满足&#xff0c;但复杂&#xff0c;重量级&#xff0c;适合大数据量。 MeiliSearch 设计目标针对数据在 500GB 左右的搜索需求&#xff0c;极快&#xff0c;单文件&#xff0c;超轻量。 所以&#xff0c;对于中小型项目来说…