Vue学习笔记9--vuex(专门在Vue中实现集中式状态(数据)管理的一个Vue插件)

一、vuex是什么?

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

二、什么时候使用vuex?

在这里插入图片描述在这里插入图片描述

  1. 多个组件依赖于同一状态
  2. 来自不同组件的行为需要变更同一状态
  3. 多个组件需要共享数据时

三、Vuex工作原理图

在这里插入图片描述

  1. Actions/Mutation/State都是对象
  2. Vuex涉及的方法和对象归Store统一管理

四、搭建Vuex环境

  1. npm i vuex@3
  2. 创建文件:src/store/index.js
//该文件用于创建Vuex中最为核心的store
import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)
//准备actions--用于响应组件中的动作
const actions = {}
//准备mutations--用于操作数据(state)
const mutations = {}
//准备state--用于存储数据
const state = {}//创建store
export default new Vuex.Store({actions,mutations, state
})
  1. 在main.js中创建vm时传入store配置项
import Vue from 'vue'
import App from './App.vue'
//引入store
import store from './store'
Vue.config.productionTip = false
//使用插件const vm = new Vue({render: h => h(App),store
}).$mount('#app')

五、基本使用

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

//该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)//准备actions——用于响应组件中的动作
const actions = {jia(context,value){console.log('actions中的jia被调用了')context.commit('JIA',value)},
}
//准备mutations——用于操作数据(state)
const mutations = {JIA(state,value){console.log('mutations中的JIA被调用了')state.sum += value},}
//准备state——用于存储数据
const state = {sum:0 //当前的和
}//创建并暴露store
export default new Vuex.Store({actions,mutations,state,
})

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

3. 组件中修改Vuex中的数据:$store.dispatch('actions中的方法名‘,数据)或 $store.commit('mutation中的方法名’,数据)

备注:若没有网络请求或其他业务逻辑,组件中也可以越过actions,直接编写commit

v-model.number 会强制把字符串转成数字

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

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

相关文章

统计学-R语言-6.1

文章目录 前言参数估计的原理总体、样本和统计量点估计区间估计评价估计量的标准有效性 总体均值的区间估计一个总体均值的估计(大样本)一个总体均值的估计(小样本估计) 练习 前言 本篇文章将开始介绍参数估计的相关知识。 参数估…

关于java的继承

关于java的继承 我们在上一篇文章中,了解到了封装,我们本篇文章来介绍一下面向对象的第二大特点,继承,还是遵循结合现实生活中的实际情况,理解着去学习,能更好的加深印象😀。 一、继承 继承的…

C++、QT 数字合成游戏

一、项目介绍 数字合成游戏 基本要求: 1)要求游戏界面简洁美观,且符合扫雷的游戏风格。 2)需要有游戏操作或者规则说明,方便玩家上手。 3)需具有开始游戏,暂停游戏,结束游戏等方便玩…

Java17新特性详解含示例代码(值得珍藏)

1. 概述 Java 17 是 Java 开发工具包(JDK)的一个重要版本,它带来了一系列的新特性和改进,以进一步增强 Java 语言的功能和性能。以下是 Java 17 中的一些主要新特性及其详细说明。 2. 新特性详解 JEP 356: Enhanced Pseudo-Ran…

【​电力电子在电力系统中的应用​】6 滞环电流控制的PWM整流器 + STATCOM整流器 + APF仿真

【仅供参考】 【2023.06西南交大电力电子在电力系统中的应用】 目录 步骤一:基于滞环电流控制的PWM整流器仿真 1.1 仿真要求 1.2 仿真电路原理及设计 1.2.1 主电路的搭建 1.2.2 控制电路的搭建 1.3 波形分析 步骤二:从PWM整流器到STATCOM仿真 2…

单元测试-spring-boot-starter-test+junit5

前言&#xff1a; 开发过程中经常需要写单元测试&#xff0c;记录一下单元测试spring-boot-starter-testjunit5的使用 引入内容&#xff1a; 引用jar包 <!-- SpringBoot测试类依赖 --> <dependency><groupId>org.springframework.boot</groupId><…

全等三角形定率

一.有两角夹一边分别相等的两个三角形全等 数学证明: 设△ A B C 与△ A 1 B 1 C 1 ∠ B ∠ B 1 , ∠ C ∠ C 1 , B 1 C 1 B C 设△ABC与△A_1B_1C_1∠B∠B_1,∠C∠C_1,B_1C_1BC 设△ABC与△A1​B1​C1​∠B∠B1​,∠C∠C1​,B1​C1​BC ①移动 ∠ B 1 与 ∠ B 重合 , 边 B…

Android WorkManager入门(二)

WorkManager入门 上一篇前言创建 WorkRequest并提交 定时的任务&#xff08;PeriodicWorkRequest&#xff09;配合约束使用定义执行范围失败后的重试为WorkRequest打上TAG其他取消方法 传参和返回参数总结参考资料 上一篇 Android WorkManager入门&#xff08;一&#xff09; …

EMQX安装和Java使用

一、EMQX介绍 EMQX是大规模分布式MQTT消息服务器&#xff0c;可以高效可靠连接海量物联网设备&#xff0c;实时处理分发消息与事件流数据&#xff0c;助力构建关键业务的物联网与云应用。EMQX 作为物联网应用开发和物联网平台搭建必须用到的基础设施软件&#xff0c;主要在边缘…

自定义Dubbo RPC通信协议

前言 Dubbo 协议层的核心SPI接口是org.apache.dubbo.rpc.Protocol&#xff0c;通过扩展该接口和围绕的相关接口&#xff0c;就可以让 Dubbo 使用我们自定义的协议来通信。默认的协议是 dubbo&#xff0c;本文提供一个 Grpc 协议的实现。 设计思路 Google 提供了 Java 的 Grpc…

VSCode使用Makefile Tools插件开发C/C++程序

提起Makefile&#xff0c;可能有人会觉得它已经过时了&#xff0c;毕竟现在有比它更好的工具&#xff0c;比如CMake&#xff0c;XMake&#xff0c;Meson等等&#xff0c;但是在Linux下很多C/C源码都是直接或者间接使用Makefile文件来编译项目的&#xff0c;可以说Makefile是基石…

C++从零开始的打怪升级之路(day14)

这是关于一个普通双非本科大一学生的C的学习记录贴 在此前&#xff0c;我学了一点点C语言还有简单的数据结构&#xff0c;如果有小伙伴想和我一起学习的&#xff0c;可以私信我交流分享学习资料 那么开启正题 今天分享的内容是string类 这里给上官方的文档链接&#xff0c;…

qt学习:进度条,水平滑动条,垂直滑动条+rgb调试实战

目录 水平滑动条&#xff0c;垂直滑动条 常用信号 进度条 常用信号 修改进度条 例子 rgb调色 配置ui界面 编写3个进度条的事件函数 添加链表容器和按钮索引 在.h里的类定义 初始化链表容器和按钮索引 编写添加颜色的按钮点击事件函数 效果 水平滑动条&#xff0c…

【Flink】FlinkSQL读取Mysql表中时间字段相差13个小时

问题:Flink版本1.13,在我们使用FlinkSQL读取Mysql中数据的时候,发现读取出来的时间字段中的数据和Mysql表中的数据相差13个小时,Mysql建表语句及插入的数据如下; CREATE TABLE `mysql_example` ( `id` int(11) unsigned NOT NULL AUTO_INCREMENT COMMENT 自增ID, `name` v…

Java-初识正则表达式 以及 练习

目录 什么是正则表达式&#xff1f; 1. 正则表达式---字符类&#xff08;一个大括号匹配一个字符&#xff09;&#xff1a; 2. 正则表达式---预字符类&#xff08;也是匹配一个字符&#xff09;&#xff1a; 正则表达式---数量词 &#xff08;可以匹配多个字符&#xff09;…

【前后端的那些事】15min快速实现图片上传,预览功能(ElementPlus+Springboot)

文章目录 Element Plus SpringBoot实现图片上传&#xff0c;预览&#xff0c;删除效果展示 1. 后端代码1.1 controller1.2 service 2. 前端代码2.1 路由创建2.2 api接口2.2 文件创建 3. 前端上传组件封装 前言&#xff1a;最近写项目&#xff0c;发现了一些很有意思的功能&…

网络安全产品之认识WEB应用防火墙

随着B/S架构的广泛应用&#xff0c;Web应用的功能越来越丰富&#xff0c;蕴含着越来越有价值的信息&#xff0c;应用程序漏洞被恶意利用的可能性越来越大&#xff0c;因此成为了黑客主要的攻击目标。传统防火墙无法解析HTTP应用层的细节&#xff0c;对规则的过滤过于死板&#…

速盾网络:高防ip是什么

速盾网络&#xff1a;高防IP是什么 在当今信息化社会中&#xff0c;网络安全问题日益突出&#xff0c;各种网络攻击威胁层出不穷。为了保护企业的网络安全&#xff0c;提高网络业务的稳定性&#xff0c;高防IP应运而生。那么&#xff0c;什么是高防IP呢&#xff1f; 高防IP是…

Jackson标签的高阶使用样例--多继承/子类、对象id、JsonIdentityInfo、JsonTypeInfo、JsonSubTypes

1. 背景 最近笔者在开发大数据平台XSailboat 的 数据资产目录 模块。它的其中一个功能是能定义并查看资产数据。我们支持的资产类型不仅有关系数据库表&#xff0c;也支持Kafka主题&#xff0c;hdfs上的文件等。对于Kafka主题&#xff0c;hdfs文件等&#xff0c;它们没有强模式…

CSS Position总结:定位属性的实战技巧

CSS Position总结&#xff1a;定位属性的实战技巧 大家好&#xff0c;我是免费搭建查券返利机器人赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;在今天的文章中&#xff0c;我们将深入研究CSS中一个至关重要的属…