vue 调用mutation方法_Vuex白话教程第三讲:Vuex旗下的Mutation

文 | 大宏

写在前面

上一讲「Vuex 旗下的 State 和 Getter」,告诉了我们怎么去使用仓库 store 中的状态数据。当然,光会用肯定还不够,大部分的应用场景还得对这些状态进行操控,那么具体如何操控呢,这就是这一讲要说的重点。

只有 mutation 能动 State

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件:每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数:

const store = new Vuex.Store({

state: {

count: 1

},

mutations: {

// 事件类型 type 为 increment

increment (state) {

// 变更状态

state.count++

}

}

})

注意,我们不能直接 store.mutations.increment() 来调用,Vuex 规定必须使用 store.commit 来触发对应 type 的方法:

store.commit('increment')

传参

我们还可以向 store.commit 传入额外的参数:

mutations: {

increment (state, n) {

state.count += n

}

}

// 调用

store.commit('increment', 10)

mutation 中的这个额外的参数,官方给它还取了一个高大上的名字:载荷(payload)。说实话,第一次在文档中看到这个标题「提交载荷」,真的就不想往下看了。

我们往往不是败给了这些生涩的概念,而是败给了自己内心的恐惧。

大多数情况下,载荷是一个对象,能够让我们更加易读:

mutations: {

increment (state, payload) {

state.count += payload.amount

}

}

关于提交的方式,有两种:

// 1、把载荷和type分开提交

store.commit('increment', {

amount: 10

})

// 2、整个对象都作为载荷传给 mutation 函数

store.commit({

type: 'increment',

amount: 10

})

当然,使用哪种方式没有绝对的界限,纯看自己的喜好,就我个人而言,还是比较倾向于使用第二种姿势,放在一起更实在。

修改规则

简单修改基础类型的状态数据倒是简单,没什么限制,但是如果修改的是对象,那就要注意了。比如这个例子:

const store = new Vuex.Store({

state: {

student: {

name: '小明',

sex: '女'

}

}

})

这个时候,我们如果想要给 student 添加一个年龄 age: 18 属性,怎么办呢?

是的,直接在 sex 下面把这个字段加上去不就行了,能这样当然最好了。但是如果我们要动态的修改呢?那就得遵循 Vue 的规则了。如下:

mutations: {

addAge (state) {

Vue.set(state.student, 'age', 18)

// 或者:

// state.student = { ...state.student, age: 18 }

}

}

以上就是给对象添加属性的两种方式,当然,对于已添加的对象,如果想修改具体值的话,直接更改就是,比如 state.student.age=20 即可。

至于为什么要这样,之前我们了解过,因为 store 中的状态是响应式的,当我们更改状态数据的时候,监视状态的 Vue 组件也会自动更新,所以 Vuex 中的 mutation 也需要与使用 Vue 一样遵守这些规则。

使用常量

就是使用常量来替代 mutation 事件的名字。

// mutation-types.js

export const SOME_MUTATION = 'SOME_MUTATION'

// store.js

import Vuex from 'vuex'

import { SOME_MUTATION } from './mutation-types'

const store = new Vuex.Store({

state: { ... },

mutations: {

// 使用 ES2015 风格的计算属性命名功能来使用一个常量作为函数名

[SOME_MUTATION] (state) {

// mutate state

}

}

})

可能有人会有疑问啊,这样做到底有啥用,还得多创建个类型文件,用的时候还要导入进来,不嫌麻烦吗!

我们看看,mutation 是怎么调用的:store.commit('increment'),可以发现,这里 commit 提交的方法 increment,是以字符串的形式代入的。如果项目小,一个人开发的话倒还好,但是项目大了,编写代码的人多了,那就麻烦了,因为需要 commit 的方法一多,就会显得特别混乱,而且以字符串形式代入的话,一旦出了错,很难排查。

所以,对于多人合作的大项目,最好还是用常量的形式来处理 mutation,对于小项目倒是无所谓,想偷懒的随意就好。

必须是同步函数

一定要记住,Mutation 必须是同步函数。为什么呢?

前面说了,我们之所以要通过提交 mutation 的方式来改变状态数据,是因为我们想要更明确地追踪到状态的变化。如果像下面这样异步的话:

mutations: {

someMutation (state) {

api.callAsyncMethod(() => {

state.count++

})

}

}

我们就不知道什么时候状态会发生改变,所以也就无法追踪了,这与 Mutation 的设计初心相悖,所以强制规定它必须是同步函数。

store.commit('increment')

// 任何由 "increment" 导致的状态变更都应该在此刻完成。

最在最后

这一讲相对来说应该还是比较好理解的。对于官方我觉得比较难理解的,我都尽量用通俗易懂的示例来进行分析,来加深大家的理解,但是不知道效果如何。如果对大家有帮助,欢迎点赞和转载,注明出处即可。

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

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

相关文章

微型计算机硬件采用什么,微型计算机的硬件系统包括什么?

微型计算机的硬件系统包括cpu、存储器、输入设备、输出设备四大部分。CPU是计算机硬件的核心,控制着整个计算机系统的工作;存储器是计算机中的记忆存储部件;输入设备是计算机与用户或其他设备通信的桥梁;输出设备是计算机硬件系统…

如何在 C# 中使用 反射

C# 中的 反射 常用于在程序的运行时获取 类型 的元数据,可获取的信息包括已加载到进程中的 程序集 和 类型 信息,它和 C 中的 RTTI(Runtime Type Information) 的作用是差不多的。为了能够使用反射,需要在项目中引用 S…

echarts迁徙图 vue_如何快速在Vue中实现流向图或迁徙图?

原标题:如何快速在Vue中实现流向图或迁徙图?我们经常在一些新闻报道和商业杂志上看到运用地图来展示商业现象的做法。这样利用地图来反映和分析数据的形式,叫数据地图,它可以直观的表达出数据之间的空间关系。在数据地图中&#x…

霍纳法树形流图中处理机p个数_2009系统结构试卷答案

一.单项选择题(共10分,每选1分)1.与流水线最大吞吐率高低有关的是(C)A.各个子过程的时间B.最快子过程的时间C.最慢子过程的时间D.最后子过程的时间2.在流水机器中,全局相关是指(D)A.先写后读相关B.先读后写相关C.指令相关D.由转移指令引起的相…

html文件上传添加额外参数,bootstrap-fileinput组件在上传时传递额外参数

解决方法关键的配置参数是uploadExtraData具体的代码如下://获得额外参数的方法fodderType function() {return $("#fodderTypeSelect").val();};//初始化fileinput控件(第一次初始化)function initFileInput(ctrlName, FileExtensions, fileSize) {var …

什么是ASP.NET Core静态Web资产?

What are ASP.NET Core Static Web Assets?HostBuilder.ConfigureWebHostDefaults()中发生了很多隐藏的魔术(最终称为ConfigureWebDefaults)。 我想更好地了解它,因为我找不到有关它的文档。此代码似乎正在加载一些静态文件。什么是静态网络资产,为什么…

计算机基础知识教案1,计算机基础知识教案一

计算机基础知识教案一 秦皇岛外国语职业学院教案首页 年 月 日 学科 计算机基础 年级 专一 课题 计算机基础知识 教具 课时分配 2课时 教学目的 1. 了解计算机的发展、特点和应用 2. 掌握计算机的系统组成 3. 掌握各个逻辑部件性能指标和作用 教学重点、…

C# 9 新特性——init only setter

C# 9 新特性——init only setterIntroC# 9 中新支持了 init 关键字,这是一个特殊的 setter,用来指定只能在对象初始化的时候进行赋值,另外支持构造器简化的写法,Target-typed new expression 在已知类型的情况下可以使用 new() 来…

时间戳计算机网络,时间戳

时间戳(Timestamp)[编辑]什么是时间戳时间戳是指使用数字签名技术对包含原始文件信息、签名参数、签名时间等信息构成的对象进行数字签名而产生的数据,用以证明原始文件在签名时间之前已经存在。通过使用如网络时间协议(NTP)的机制,计算机维系准确的当前…

乔安监控云存储_智能运维丨全栈监控,护航云上业务

自2006年至今,云计算商用领域已经历了十余载的发展。云也从概念普及进入到广泛应用阶段,云服务变成了像水电一样的基础服务,已经是行业共识。云发展速度快、成长空间大,监控场景复杂最新Gartner的报告预测到2019年公有云市场将达到…

阿星Plus:基于abp vNext开源一个博客网站

作为微软最早迈向开源的重要软件之一,.NET 5的发布具有重要意义!微软希望 .NET Framework 开发者能够迁移他们的代码和应用到 .NET 5.0 上,为明年发布的 .NET 6.0 将 Xamarin 开发者过渡到统一平台奠定基础。这里推荐一个.NET Core 3.1 开源的…

html 保存文件指定路径,78.上传文件及在服务器保存文件到任意路径

上传文件到服务器是一个常用的操作,而在服务器上保存文件就需要多多用心了。因为你不可能只在一个路径里保存文件,所以需要实践一下保存文件到任意位置。当然,前提是你的应用程序有这样的操作权限。首先建立一个main.go文件,作为项…

excel表格中添加combobox_Excel中两个表格对比,找出不同数据

当你有两个Excel工作簿需要对比数据时候,你该怎么做呢?数据少,我们直接用眼睛就可以看到,数据如果太多,那么对比找出不同数据,是一件非常困难的事情。今天,小汪老师就来教大家几招,可…

2021,未来可期

一转眼,已经是2021了。这个公众号,也陪伴大家走过了八个月的时光。八个月,35篇原创,坚持写一些能够经受时间考验的文章,也算是一个小小的成就。感慨一下,因为,未来可期!整理了一个目…

quill变html转化,将Quill Delta转换为HTML

这里是我是如何做到的,因为你快速乡亲。它似乎与express-sanitizer一起工作得很好。app.jsimport expressSanitizer from express-sanitizerapp.use(expressSanitizer())app.post(/route, async (req, res) > {const title req.body.article.titleconst content…

【Git】Git-常用命令备忘录(一)

不管是linux还是git,都有相当一部分命令,但是如果不常用,或者久疏战阵,总会有些遗忘。好记性不如烂笔头。美国《科学》杂志刊发了Betsy Sparrow等的科研论文,称Google等搜索引擎模式可能会损害人的大脑记忆力。意思大概…

非抢占式优先算法例题_非抢占短作业优先算法源代码(C语言)

#include #include #define MAX 5 //进程数/*短作业优先算法*/struct pro{int num; //进程名int arriveTime; //到达时间int burst; //运行时间;struct pro *next;};//函数声明struct pro* creatList();void insert(struct pro *head,struct pro *s);struct pro* searchByAT(st…

计算机算法音乐专业,音乐信号分析算法的乐理简说(非音乐专业的乐理)

前言这篇文章不是讲乐理知识的,那是音乐制作人,编曲人员所需要钻研的学问,不过你要有兴趣也可以看看专业的乐理知识。这里仅仅是说在音乐信号分析的项目中,我们需要知道的一些参数的意义。在诸多信号处理,或图像处理算…

代码改变世界,也改变了我

愿2021的你,可以勇敢的踏出那一步,可以去追求自己想要的东西。脑图版代码版using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks;namespace ConsoleApp14 {internal class Program{pr…