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方法的使用。

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

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

相关文章

Vue——计算属性

文章目录 计算属性computed 计算属性 vs methods 方法计算属性完整写法 综合案例:成绩案例 计算属性 概念:基于现有的数据,计算出来的新属性。依赖的数据变化,自动重新计算 语法: ①声明computed配置项中,一个计算属性…

清华大学计算机学科推荐学术会议和期刊列表——网络与信息安全

A类会议 这里仅列出A类会议 会议简称会议全程网址IEEE S&PIEEE Symposium on Security and Privacyhttp://dblp.uni-trier.de/db/conf/sp/NDSSISOC Network and Distributed System Security Symposiumhttp://dblp.uni-trier.de/db/conf/ndss/USENIX SecurityUsenix Secu…

nodejs学习计划--(三)http协议和IP介绍

一、 HTPP协议 1、概念 HTTP(hypertext transport protocol)协议;中文叫超文本传输协议 是一种基于TCP/IP的应用层通信协议 这个协议详细规定了 浏览器 和万维网 服务器 之间互相通信的规则。 协议中主要规定了两个方面的内容 客户端&…

gin渲染篇

1. 各种数据格式的响应 json、结构体、XML、YAML类似于java的properties、ProtoBuf package mainimport ("github.com/gin-gonic/gin""github.com/gin-gonic/gin/testdata/protoexample" )// 多种响应方式 func main() {// 1.创建路由// 默认使用了2个中…

链表中倒数第k个结点(附带源码)

目录 代码部分: 核心:看图 代码部分: struct ListNode* FindKthToTail(struct ListNode* pListHead, int k ) {// write code here// write code hereif (k 0){return NULL;}else{struct ListNode* slow pListHead, * fast pListHead;//…

C++中函数的默认参数(缺省参数)

一、函数默认参数的概念 在函数声明时,预先对函数参数进行赋值,该参数即为函数的默认参数,也叫缺省参数。 如下函数func1包含默认参数,若调用函数func1时没有给函数传入实参,则默认实参为10086 void func1(int a 1…

【Redis】Ubuntu安装配置

目录 一、安装Redis 1.1 从APT仓库安装Redis 二、启动&关闭&重启 三、Redis核心配置 3.1 CONFIG命令 3.2 redis.conf文件说明 一、安装Redis 1.1 从APT仓库安装Redis 从APT仓库可以安装最新的Redis稳定版,步骤如下: 【1】安装需要用到的…

Spring 中有哪些方式可以把 Bean 注入到 IOC 容器?

目录 1、xml方式2、CompontScan Component3、使用 Bean方式4、使用Import 注解5、FactoryBean 工厂 bean6、使用 ImportBeanDefinitionRegistrar 向容器中注入Bean7、实现 ImportSelector 接口 1、xml方式 使用 xml 的方式来声明 Bean 的定义,Spring 容器在启动的…

Linux内核pinctrl子系统驱动框架

一. 简介 本文简单了解一下Linux内核代码中, pinctrl子系统的驱动实现。 注意:本文会涉及到 Linux 驱动分层与分离、平台设备驱动等还未讲解的知识 ,所以,也不会影响后续的实验。 二. Linux内核pinctrl子系统驱动 1. probe函…

【数学建模】数据处理与可视化

文章目录 数值计算工具NumPy数组的创建、属性和操作数组的运算、通用函数和广播运算Numpy.random模块的随机数生成文本文件和二进制文件存取 文件操作文件基本操作文件管理方法 数据处理工具PandasSeries和DataFrame外部文件存取 Matplotlib可视化基础用法可视化应用可视化综合…

2023年DevOps国际峰会暨 BizDevOps 企业峰会(DOIS北京站):核心内容与学习收获(附大会核心PPT下载)

随着科技的飞速发展,软件开发的模式和流程也在不断地演变。在众多软件开发方法中,DevOps已成为当下热门的软件开发运维一体化模式。特别是在中国,随着越来越多的企业开始认识到DevOps的价值,这一领域的研究与实践活动日益活跃。本…

互联网架构演变过程

互联网架构演变过程 互联网架构经历了几个重要的演变过程,主要包括以下几个阶段: 单一服务器架构:早期的互联网应用通常运行在单一的服务器上,该服务器负责处理所有的请求和数据存储。这种架构简单直接,但容易出现性能…

反序列化字符串逃逸(下篇)

这里承接上篇文章反序列化字符串逃逸&#xff08;上篇&#xff09;-CSDN博客带大家学习反序列化字符串逃逸减少&#xff0c;没有看过的可以先去看看&#xff0c;不会吃亏。 例题&#xff1a; <?php highlight_file(__FILE__); error_reporting(0); function filter($name…

数据结构编程题:Phone List

题目描述 Given a list of phone numbers, determine if it is consistent in the sense that no number is the prefix of another. Let’s say the phone catalogue listed these numbers: 段落大意:给定一组电话号码&#xff0c;判断它们是否一致&#xff0c;即没有一个号码…

Linux_清理docker磁盘占用

文章目录 前言一、docker system 命令1. docker system df&#xff08;本文重点使用&#xff09;2. docker system prune&#xff08;本文重点使用&#xff09;3. docker system info4. docker system events 二、开始清理三、单独清理Build Cache四、单独清理未被使用的网络 前…

nginx虚拟主机

虚拟主机指的就是一个独立的站点配置&#xff0c;是nginx默认支持的一个功能&#xff0c;它能够有自己独立的域名&#xff0c;独立的ip&#xff0c;独立的端口配置&#xff0c;能够配置完整的www服务&#xff0c;列如网站搭建&#xff0c;邮件服务器代理等等。并且nginx支持多虚…

回归预测 | Python基于Encoder-TCN-BIGRU-Decoder多变量回归预测

目录 效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.支持多输入&#xff0c;单输出&#xff01; 2.使用了多种可视化方法&#xff0c;代码编写过程中也对各段代码进行封装&#xff0c;方便解读和调试&#xff01; 3.适合于风电数据&#xff0c;光伏数据&#xff0c;环…

设计模式篇---中介者模式

文章目录 概念结构实例总结 概念 中介者模式&#xff1a;用一个中介对象来封装一系列的对象交互。中介者使各对象不需要显示地相互引用&#xff0c;从而使其耦合松散&#xff0c;而且可以独立地改变它们之间的交互。 就好比世界各个国家之间可能会产生冲突&#xff0c;但是当产…

深入数仓离线数据同步:问题分析与优化措施

一、前言 在数据仓库领域&#xff0c;离线数仓和实时数仓是常见的两种架构类型。离线数仓一般通过定时任务在特定时间点&#xff08;通常是凌晨&#xff09;将业务数据同步到数据仓库中。这种方式适用于对数据实时性要求不高&#xff0c;更侧重于历史数据分析和报告生成的场景…

Excel新建文件打开后提示文件扩展名与文件格式不匹配

环境&#xff1a; Win10专业版 excel2016 问题描述&#xff1a; Excel新建文件打开后提示文件扩展名与文件格式不匹配 解决方案&#xff1a; 1.调出注册表编辑器&#xff0c;按层点击文件夹&#xff1a;HKEY_CURRENT_USER/Software/Microsoft/Office/12.0/Excel/Securit…