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配置项中,一个计算属性…

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;//…

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…

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…

利用Anaconda安装pytorch和paddle深度学习环境+pycharm安装后不能调用pytorch和paddlepaddle框架

问题现象&#xff1a; 之前安装后不能在添加pytorch和paddlepaddle框架 原因&#xff08;疑似&#xff09;&#xff1a; 在终端中显示pytorch和paddle在C盘但是安装是安装在J盘 解决办法&#xff1a; 卸载、删除文件重新安装后可以看到文件位置在J盘中 但是选择时还是显示C…

【cucumber】cucumber-reporting生成测试报告

原始的cucumber report 比较粗糙 我们可以通过cucumber-reporting 插件对报告进去优化 在pom.xml里面添加cuccumber-reporting 插件 <!-- 根据 cucumber json文件 美化测试报告--><dependency><groupId>net.masterthought</groupId><artifactId>…

设计模式—行为型模式之观察者模式

设计模式—行为型模式之观察者模式 观察者模式(Observer Pattern)&#xff1a;定义对象间的一种一对多依赖关系&#xff0c;使得每当一个对象状态发生改变时&#xff0c;其相关依赖对象皆得到通知并被自动更新。观察者模式又叫做发布-订阅&#xff08;Publish/Subscribe&#…

Java 基于 SpringBoot+Vue 的社区团购系统

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝30W、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…

【射影几何02-补】极点和极线,调和点列

一、说明 极点和极线&#xff08;Pole and polar&#xff09;对于几何学&#xff0c;是普遍的概念。可能高中就学过&#xff0c;问题是在双曲几何又用到这个概念。前面已经有写过一文&#xff0c;经过再次学习&#xff0c;逐渐感觉前文描述不很理想&#xff0c;这一文专门纠正前…

【视频媒体】深入了解直播视频流

深入了解直播视频流&#x1f3a5; YouTube、TikTok live和Twitch上的直播视频是如何工作的&#xff1f; 直播视频流与常规流媒体不同&#xff0c;因为视频内容通过互联网近乎实时发送&#xff0c;通常只有几秒钟的延迟。 下图解释了实现这一目标背后所发生的事情。 步骤1&…

何为PyTorch?

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