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.hqwc.cn/news/421569.html

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

相关文章

2023.1.21 关于 Redis 主从复制详解

目录 引言 单点问题 分布式系统 主从模式 配置 Redis 主从结构 断开主从关系 切换主从关系 补充知识点一 只读 网络延迟 拓扑结构 一主一从 一主多从 树形主从结构 主从复制的基本流程 数据同步 replicationid offset pzync 运行流程 具体流程 补充知识点二…

GNU Radio简介及流程图搭建

文章目录 前言一、GNU Radio 是什么?二、GNU Radio 安装三、搭建第一个流程图1、创建 GRC 文件2、添加块3、运行流程图 前言 欢迎来到无线通信的世界,初步接触 GNU Radio,对其学习进行一个记录。 一、GNU Radio 是什么? GNU Rad…

无偿!全代码!增删改查+redis+token+mybatisplus 完整代码+讲解适合大一大二以及新手小白 Controller层讲解

这是一个简单的基础的且有不足的代码1.设置了一个管理员账号用于登录页面(用到简单的redis和token)2.增删改查(批量or单个删除)患者信息3.可更改患者身体状况4.excl表导出患者总体信息4.计算不同地区的患者情况并用前端以图标形式…

校园疫情防控信息管理系统的设计与实现-计算机毕业设计源码12057

摘 要 如今计算机行业的发展极为快速,搭载于计算机软件运行的数据库管理系统在各行各业得到了广泛的运用,其在数据管理方面具有的准确性和高效性为大中小企业的日常运营提供了巨大的帮助。自从2020年新冠疫情爆发以来,防疫成了社会关注的重中…

结构体的内存对齐(计算题常考点)

许久不见我考完试回来啦,让我们接着将结构体进行到底! 目录 结构体对齐的意义: 结构体对齐的实现: 对齐规则: 训练: 好到这里误区来了: 总结: 往期回顾: 下期预告&…

docker使用http_proxy配置代理

钢铁知识库,一个学习python爬虫、数据分析的知识库。人生苦短,快用python。 在内网服务器中,docker经常需要下载拉取镜像,但由于没有网络要么只能手动导入镜像包,又或者通过http_proxy代理到其它服务器下载。 解决方法…

Elasticsearch+Kibana 学习记录

文章目录 安装Elasticsearch 安装Kibana 安装 Rest风格API操作索引基本概念示例创建索引查看索引删除索引映射配置(不配置好像也行、智能判断)新增数据随机生成ID自定义ID 修改数据删除数据 查询基本查询查询所有(match_all)匹配查…

腾讯产品面试题:为什么水果店不卖蔬菜,蔬菜店却卖水果?

嗨,亲爱的小伙伴们!小米又来啦~ 今天我要和大家聊一聊一个超级有趣的话题——腾讯产品面试题:为什么水果店不卖蔬菜,蔬菜店却卖水果?这是不是让你脑洞大开呀?!不过别着急,小米会给你…

【Leetcode】2788. 按分隔符拆分字符串

文章目录 题目思路代码 题目 题目链接 给你一个字符串数组 words 和一个字符 separator ,请你按 separator 拆分 words 中的每个字符串。 返回一个由拆分后的新字符串组成的字符串数组,不包括空字符串 。 注意 separator 用于决定拆分发生的位置&#…

预防校园火灾守护校园安全:巡检系统的使命与责任

校园安全的重要性 校园场所因人员密集而具有特殊的安全风险,一旦发生事故往往会引发严重后果。近日方城一小学发生的火灾造成了13人遇难,这样的悲剧再次提醒我们,生命安全绝对不能忽视。因此,预防校园火灾是每一个校园管理者和师生…

PS滤镜插件:Adobe Camera Raw 16 for Mac中文激活版

Adobe Camera Raw是Adobe公司开发的一款用于处理数码相机RAW格式文件的软件插件。它可以在Adobe Photoshop、Adobe Bridge和Adobe Lightroom等软件中使用,用于调整RAW文件的曝光、白平衡、对比度、色彩饱和度、锐化等参数,从而得到更好的图像质量。 软件…

Mysql - 定点型(DECIMAL)的使用详解及练习

目录 🐶1. 前言: 🐶2. DECIMAL类型简介 🐶3. Decimal使用实战 🥪#结论1:小数位不足会自动补0 🥪#结论2:小数位超出会截断 并按四舍五入处理。 🥪#结论3&#xff1…