vue 中的 Vuex

Vuex

Vuex是什么?

概念:专门在vue中实现集中式状态(数据)管理的一个Vue插件,对Vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信

搭建Vuex环境

  1. 下载安装vuex 使用命令: npm i vuex
  2. 创建src/store/index.js该文件用于创建Vuex中最为核心的 store(store是文件)

Vuex Github地址

$bus.$on('getX',回调)
$bus.$emit('updateX',数据)

在这里插入图片描述

使用Vuex组件

什么时候使用Vuex

  1. 多个组件依赖于同一状态
  2. 来自不同组件的行为需要变更同—状态

在这里插入图片描述


1. 引入Vuex【store/index.js】

import Vuex from 'vuex'

2. 注册Vuex插件

Vue.use(Vuex)

3. 准备三个组件 actions mutations state

准备actions–用于响应组件中的动作
const actions = {}
准备mutations–用于操作数据(state)
const mutations = {}
准备state–用于存储数据
const state = {}

4. 创建并暴露store

	export default new Vuex.Store({actions,mutations,state})

总结:
在这里插入图片描述

使用Vuex编写

  • Vuex的基本使用

1.初始化数据state,配置actions .mutations,操作文件store.js

  1. 读取vuex中的数据
    $store.state.数据名
  2. 修改vuex中的数据 action方法 / mutations方法
    $store.dispatch( 'action中的方法名',数据)
    $store.commit( 'mutations中的方法名',数据)

commit方法
在这里插入图片描述

getters 配置项

概念:当state 中的数据需要经过加工后再使用时,可以使用 getters 加工,相当于全局计算属性在store.js 中追加getters配置

引入全局计算属性 getters

	const getters = {bigSum(state){return state.sum *10}}//创建并暴露storeexport default new Vuex.Store({getters})

【src/index.js】
在这里插入图片描述

组件中读取数据

	$store.getters.bigSum

【文件内读取数据 Xxx.vue】
在这里插入图片描述

map方法

  1. mapState方法:用于帮助映射state中的数据为计算属性
    在这里插入图片描述
  2. mapGetters方法:用于帮助映射getters 中的数据为计算属性
    在这里插入图片描述
    √ 3. ** mapActions方法:用于帮助生成与actions对话的方法,即包含$store.dispatch(xxx)的函数**
    在这里插入图片描述
    √ 4. mapMutations方法:用于帮助生成与mutations对话的方法,即包含
    $store.commit(xxx)的函数

    在这里插入图片描述
    注意: mapActions 与mapMutations使用时
    若需要传递参数需要:在模板中绑定事件时传递好参数 否则参数是事件对象

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

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

相关文章

2024最新小红书电商落地实操课,从入门到精通,打造爆款方法(16节课)

你是不是经常在小红书上看到各种各样的推广和引流方法,却感觉实际操作起来很困难? 那么,这门2024最新小红书电商落地实操课就是为你量身定制的!从入门到精通,不仅能让你了解电商平台的基本规则和玩法,还能…

ansible------inventory 主机清单

目录 inventory 中的变量 2)组变量[webservers:vars] #表示为 webservers 组内所有主机定义变量,所有组内成 员都有效 ansible_userrootansible_passwordabc1234 3) [all:vars…

VulkanSDK Demos vkcube 编译失败

操作系统: Windows 11 23H2 Vulkan 版本: 1.3.2.280.0 Visual Studio 版本: 2022 在VulkanSDK/Demos目录下存在一个demo solution,其中包含两个project, vkcube和vkcubepp,两个分别为C语言和C写的示例程序, 但是直接编译这两个project时会编译失败,报了以下错误: fatal err…

[Java EE] 文件IO(一):文件概念与文件系统操作

🌸个人主页:https://blog.csdn.net/2301_80050796?spm1000.2115.3001.5343 🏵️热门专栏:🍕 Collection与数据结构 (91平均质量分)https://blog.csdn.net/2301_80050796/category_12621348.html?spm1001.2014.3001.5482 🧀Java …

LeetCode 每日一题 ---- 【2391.收集垃圾的最少总时间】

LeetCode 每日一题 ---- 【2391.收集垃圾的最少总时间】 2391.收集垃圾的最少总时间方法:模拟(多次遍历) 2391.收集垃圾的最少总时间 方法:模拟(多次遍历) 需要注意的点是,处理一个单位的一个…

mysql分页排序的坑,千万注意!

1、问题复现 现象: mysql对无索引字段进行排序后limit ,当被排序字段有相同值时并且在limit范围内,取的值并不是正常排序后的值,有可能第一页查询的记录,重复出现在第二页的查询记录中,而且第二页的查询结…

青少年软件编程(Python)等级考试试卷(四级)2024年3月

电子学会2024.03青少年软件编程(Python)等级考试试卷(四级) 一、单选题 1.运行如下代码,若输入整数3,则最终输出的结果为? ( ) def f(x): if x1: s1 else: sf(x-1)*x return s nint(input("请…

Java RMI SERVER命令执行漏洞

Java RMI SERVER命令执行漏洞 一、介绍二、原理三、复现准备四、漏洞复现 一、介绍 RMI全称是Remote Method Invocation(远程方法调用),是专为Java环境设计的远程方法调用机制,远程服务器提供API,客户端根据API提供相…

java性能分析async-profiler

项目地址 github:https://github.com/async-profiler/async-profiler cpu ./asprof -d 600s -f cpu.html pidcpu-wall:表示抓取所有状态下的线程数据,包含:Running, Sleeping or Blocked ./asprof -e wall -d 600s -f cpu-wall…

TypeScript 工具类型

这些工具类型是 TypeScript 提供的强大功能&#xff0c;用于操作和转换类型。下面是每个工具类型的简要说明和示例&#xff1a; 1、Record let value: Record<string, any> { name: "", age: 0, desc: [] }; let value2: { [key: string]: any } { name: &…

java生成二维码合并海报并加上文字

1.生成二维码 public static byte[] generateQRCodeImages(String text, int width, int height) throws WriterException, IOException {String binary null;QRCodeWriter qrCodeWriter new QRCodeWriter();//调整白边大小Hashtable<EncodeHintType, Object> hints n…

微信小程序新技能解锁:轻松实现二维码扫描与识别

微信小程序新技能解锁&#xff1a;轻松实现二维码扫描与识别 在移动互联网时代&#xff0c;二维码已成为连接线上线下的桥梁&#xff0c;而微信小程序作为轻量级应用的代表&#xff0c;自然也少不了二维码扫描与识别的功能。本文将手把手教你如何在微信小程序中集成这项实用功…

【3dmax笔记】020:变换输入、世界坐标、屏幕坐标案例详解

文章目录 一、变换输入二、世界坐标三、屏幕坐标四、区别一、变换输入 变换输入可用于:移动/旋转/缩放变换输入,快捷键为F12,在变换输入窗口中,有两种常见重要的坐标系: 世界坐标:固定屏幕坐标:随着选择的视图发生变化在3ds Max中,世界坐标(World Coordinate System)…

Git Bash和Git GUI设置中文的方法

0 前言 Git是一个分布式版本控制系统&#xff0c;可以有效、高速地处理从很小到非常大的项目版本管理。一般默认语言为英文&#xff0c;本文介绍修改Git Bash和Git GUI语言为中文的方法。 1 Git Bash设置中文方法 &#xff08;1&#xff09;鼠标右键&#xff0c;单击“Git B…

网络无线网卡无法配置正确的 dns 服务器

网络无线网卡无法配置正确的 dns 服务器--解决办法 网络无线网卡无法配置正确的 dns 服务器--解决办法 网络无线网卡无法配置正确的 dns 服务器–解决办法 建议先使用疑难反馈&#xff08;自带的&#xff09; 打开网络适配中心 之后更改适配器设置&#xff0c;在点击 wlan 属…

【linux】linux工具使用

这一章完全可以和前两篇文件归类在一起&#xff0c;可以选择放一起看哦 http://t.csdnimg.cn/aNaAg http://t.csdnimg.cn/gkJx7 拖更好久了&#xff0c;抱歉&#xff0c;让我偷了会懒 1. 自动化构建工具 make , makefile make 是一个命令&#xff0c;makefile 是一个文件&…

jdk安装使用(Linux)

文章目录 JDK在Linux的安装Linux运行打包好的springboot项目停止在Linux服务器上运行的Spring Boot应用程序 JDK在Linux的安装 在Linux上安装JDK&#xff08;Java Development Kit&#xff09;可以通过以下步骤完成&#xff1a; 下载JDK安装包&#xff1a; 访问Oracle官方网站…

【Java】变量类型

类变量&#xff1a;独立于方法之外的变量&#xff0c;用static修饰实例变量&#xff1a;独立于方法之外的变量&#xff0c;不过没有static修饰局部变量&#xff1a;类的方法中的变量 示例1&#xff1a; public class test_A {static int a;//类变量(静态变量)String b;//实例…

Mysql 日志(redolog, binlog, undoLog)

重做日志-redolog 是什么 innoDB存储引擎层面的日志&#xff0c;它的作用是当 数据更新过程中数据库发生异常导致提交的记录丢失 为什么 mysql的基本存储结构是页&#xff08;记录都在页里面&#xff09;&#xff0c;所以更新语句时&#xff0c;mysql需要先把要更新的语句找…

Softing工业推出的edgeConnector将Allen-Bradley控制器集成到工业边缘应用中

2024年4月17日&#xff08;哈尔&#xff09;&#xff0c;Softing宣布扩展其基于Docker的edgeConnector产品系列&#xff0c;推出了新软件模块edgeConnector Allen Bradley PLC&#xff0c;可方便用户访问来自ControlLogix和CompactLogix控制器数据。 &#xff08;edgeConnector…