Vuex的基础使用

在使用之前要先了解Vuex的组成结构,跟对应的使用关系。

在上图的结构图中可以看到四个组成部分,首先是Components(组件)、Actions(行动)、Mutations(变化)、state(状态/数据)。

使用Vuex的目的就是为了管理好各个组件间共享的数据,而这些数据正是存放在Vuex的State里面的,各个组件想要存放或修改State中的数据就要通过Actions和Mutations完成,接下来详细说一下Action和Mutations的作用和使用方法。

actions是用于处理异步操作的方法,Actions本质上是一个函数,它可以通过store的dispatch调用,当调用一个actions时,它会接收一个context对象作为第一个参数,第二个参数是我们调用时再传入的。等异步操作完成之后通过Commit方法将数据继续传给Mutations进行下一步的处理。

Mutations是唯一可以直接更改state里面数据的一个方法,简单理解就是当我们想要改掉各组件共享数据state时就必须经过Mutations,和actions不同的是它只能处理同步的操作,这里可以简单理解为我们操作数据时不需要异步处理的时候可以直接跳过axtions用Commit方法来调用Mutations对数据进行同步处理,但有异步处理时也要异步处理完之后再经过Mutations来同步操作state里的数据。

上一篇文章介绍过如何搭建Vuex,下面就用个组件中的案例来接受一下Vuex的使用。

//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//引用Vuex
Vue.use(Vuex)

//配置actions
const actions = {
	//响应组件中加的动作,value是组件传过来的参数
	jia(context, value) {
			//console.log('actions中的jia被调用了',miniStore,value)
			context.commit('JIA',vaule)
	}
}
//配置mutations
const mutations = {
	//执行加,value还是组件第一次传过来的值
	JIA(state,value) {
		//console.log('mutations中的JIA被调用了',state,value)
	}
}

//初始化数据
const state = {
	sum: 0
}

//创建并暴露store
export default new Vuex.Store({
	actions,
	mutations,
	state
})

以上是Vuex文件初始化数据、配置actions、配置mutations、操作文件store.js。接下来对应的是组件上的操作。

//组件中读取xuex中的数据
$store.state.sum

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

使用就先介绍到这里,后面还会继续分享Vuex的getters配置和四个map方法的使用。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Mysql运维篇(三) MySQL数据库分库分表方案

一路走来,所有遇到的人,帮助过我的、伤害过我的都是朋友,没有一个是敌人,如有侵权请留言,我及时删除。 一、前言 关系型数据库本身比较容易成为系统瓶颈,单机存储容量、连接数、处理能力都有限。当单表的数…

【MySQL进阶】SQL优化

文章目录 SQL 优化主键优化数据组织方式页分裂页合并主键设计原则 insert优化order by优化group by优化limit优化count优化 SQL 优化 主键优化 数据组织方式 在InnoDB存储引擎中,表数据都是根据主键顺序组织存放的,这种存储方式的表称为索引组织表 在In…

【5G 接口协议】N2接口协议NGAP(NG Application Protocol)介绍

博主未授权任何人或组织机构转载博主任何原创文章,感谢各位对原创的支持! 博主链接 本人就职于国际知名终端厂商,负责modem芯片研发。 在5G早期负责终端数据业务层、核心网相关的开发工作,目前牵头6G算力网络技术标准研究。 博客…

PIG框架学习3——Redisson 实现业务接口幂等

零、前言 ​ 业务接口幂等问题是在开发中遇到的,如果对业务接口代码不进行幂等控制,并且在前端没有对请求进行限制的情况下,可能会出现多次对接口调用,导致错误异常的发生。就上述情况,对PIGX自带的业务接口幂等实现进…

无法找到mfc100.dll的解决方法分享,如何快速修复mfc100.dll文件

在日常使用电脑时,我们可能会碰到一些系统错误提示,比如“无法找到mfc100.dll”的信息。这种错误通常会阻碍代码的执行或某些应用程序的启动。为了帮助您解决这一问题,本文将深入探讨其成因,并提供几种不同的mfc100.dll解决方案。…

lv14 内核定时器 11

一、时钟中断 硬件有一个时钟装置,该装置每隔一定时间发出一个时钟中断(称为一次时钟嘀嗒-tick),对应的中断处理程序就将全局变量jiffies_64加1 jiffies_64 是一个全局64位整型, jiffies全局变量为其低32位的全局变量&#xff0…

三.Winform使用Webview2加载本地HTML页面

Winform使用Webview2加载本地HTML页面 往期目录创建Demo2界面创建HTML页面在Demo2窗体上添加WebView2和按钮加载HTML查看效果 往期目录 往期相关文章目录 专栏目录 创建Demo2界面 经过前面两小节 一.Winform使用Webview2(Edge浏览器核心) 创建demo(Demo1)实现回车导航到指定…

用立创EDA(专业版)设计原理图

简介 立创EDA,国产的EDA工具。 下载 官方下载链接 下载后,直接一直下一步,最后安装提示免费激活即可。 注意 嘉立创EDA专业版的数据和立创EDA标准版的数据不互通, 常用原理图绘制设置 开发流程 新建工程绘制PCB 文件->新…

【QT+QGIS跨平台编译】之一:【sqlite+Qt跨平台编译】(一套代码、一套框架,跨平台编译)

文章目录 一、sqlite3介绍二、文件下载三、文件分析四、pro文件五、编译实践 一、sqlite3介绍 SQLite是一款轻型的数据库,是遵守ACID的关系型数据库管理系统,它包含在一个相对小的C库中。它是D.RichardHipp建立的公有领域项目。它的设计目标是嵌入式的&…

【数据结构】 双链表的基本操作 (C语言版)

目录 一、双链表 1、双链表的定义: 2、双链表表的优缺点: 二、双链表的基本操作算法(C语言) 1、宏定义 2、创建结构体 3、双链表的初始化 4、双链表表插入 5、双链表的查找 6、双链表的取值 7、求双链表长度 8、双链表…

2023年12月 Scratch 图形化(一级)真题解析#中国电子学会#全国青少年软件编程等级考试

Scratch图形化等级考试(1~4级)全部真题・点这里 一、单选题(共25题,每题2分,共50分) 第1题 观察下列每个圆形中的四个数,找出规律,在括号里填上适当的数?( ) A:9 B:17 C:21 D:5 答案:C 左上角的数=下面两个数的和+右上角的数

142.环形链表 II 、141. 环形链表(附带源码)

目录 一、142问题的分析与解决: 二、怎么做? 三、142代码 四、141代码 一、142问题的分析与解决: 核心:定义快慢指针:slow、fast 思路是当快指针fast进环时,慢指针slow一定没有进环 这个时候就是就变…

flink基本概念

1. Flink关键组件: 这里首先要说明一下“客户端”。其实客户端并不是处理系统的一部分,它只负责作业的提交。具体来说,就是调用程序的 main 方法,将代码转换成“数据流图”(Dataflow Graph),并最终生成作业…

Leetcode刷题笔记题解(C++):LCR 174. 寻找二叉搜索树中的目标节点

思路:二叉搜索树的中序遍历是有序的从大到小的,故得出中序遍历的结果,即要第cnt大的数为倒数第cnt的数 /*** Definition for a binary tree node.* struct TreeNode {* int val;* TreeNode *left;* TreeNode *right;* TreeN…

新闻每天都在更新,那网页上的新闻页面是怎么使用Dreamweaver制作的?

新闻每天都在更新,那网页上的新闻页面是怎么使用Dreamweaver制作的? 新闻有很多种,但大多数结构都差不多,我们就先做一个简单的新闻页面,如图1中画圈圈的新闻内容。 图1 案例实现 新闻页面一般由四个部分构成&#…

【spring】代码生成器

📝个人主页:五敷有你 🔥系列专栏:spring ⛺️稳中求进,晒太阳 代码生成器(本质IO流) 在mybatis的逆向工程生成model和mapper接口和xml文件后,还需要反复的写Service的接口和…

何为PyTorch?

PyTorch的名字来源于它的功能和设计哲学。"Py"代表Python,因为PyTorch是一个基于Python的深度学习库,它充分利用了Python语言的灵活性和易用性,为开发者提供了简洁而强大的接口。“Torch”则代表其前身—— Torch,这是一…

7.前端--CSS-复合选择器

1.什么是复合选择器 复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的,可以更准确、更高效的选择目标元素(标签) 常用的复合选择器包括:后代选择器、子选择器、并集选择器、伪类选择器等等 2.后代选择器 …

Opencv轮廓检测运用与理解

目录 引入 基本理解 加深理解 ①比如我们可以获取我们的第一个轮廓,只展示第一个轮廓 ②我们还可以用一个矩形把我们的轮廓给框出来 ③计算轮廓的周长和面积 引入 顾名思义,就是把我们图片的轮廓全部都描边出来 也就是我们在日常生活中面部识别的时候会有一个框,那玩意就…

wayland(wl_shell) + egl + opengles 最简实例

文章目录 前言一、ubuntu 上相关环境准备1. ubuntu 上安装 weston2. 确定ubuntu 上安装的opengles 版本3. 确定安装的 weston 是否支持 wl_shell 接口二、窗口管理器接口 wl_shell 介绍二、代码实例1.egl_wayland_demo.c2. 编译和运行2.1 编译2.2 运行总结参考资料前言 本文主…