一位面试者提到直接调用vuex中mutations方法

简述是用this.$store.mutations.xxx(xx)方式调用，因从未见过此种调用方式，回来就搜索了一下，查询结果如下

首先前文：

获取 state 的方式有两种，分别是 this.$store.state.num 这种直接获取的方式，以及通过 getter 定义的方式获取 this.$store.getter.num。

而修改 state 不能直接修改对象或者覆盖对象的属性，因为我们遵循的是单一状态树的管理原则，不允许通过 this.$store.state.num = 3 修改 state。

mutations：

定义的 mutations 对象将挂载到 Store 的 mutations 属性上。

mutations 的每个属性都是以方法的形式定义，默认接收一个参数，而这个参数实际上就是 Store 的 state 对象，只有在 mutations 的属性中直接通过 state.xxx = xxx 修改 state。

mutations 的方法也不是直接通过 this.$store.mutations.xxx(xx) 去调用的，而是通过主动触发的。

可以打印 this.$store 查看 Store 的属性，可以发现， mutations 是以 _mutations 的私有属性形式存在的，因此并不能直接调用（不能是指不允许）。

从上面的属性列表中可以发现 commit 属性，而这个属性是一个 function，用来触发 mutations 中定义的 mutation，所以可以通过commit方式触发mutations中定义的方法

另外tips:

　　1. commit方法穿参除默认参数state外另一个参数是payload，且payload只支持一个参数

　　2. mapMutations ：

import { mapMutations } from 'vuex'export default {methods: {...mapMutations(['increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`// `mapMutations` 也支持载荷：'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
    ])}
}

一万个感谢让我更深入认知到mutations

转载于:https://www.cnblogs.com/yl179578605/p/10646826.html

一位面试者提到直接调用vuex中mutations方法相关推荐

一位面试官询问我：Java中的JVM内存溢出和内存泄露是什么？我这么回答成功拿到了offer
一位面试官询问我:Java中的JVM内存溢出和内存泄露是什么?我这么回答成功拿到了offer. 墨眉无锋墨家代码 2020-11-22 20:16:50 10525 收藏 56 分类专栏: Java ...
【手写 Vuex 源码】第五篇 - Vuex 中 Mutations 和 Actions 的实现
一,前言上一篇,主要介绍了 Vuex 中 getters 的实现,主要涉及以下几个点: 将选项中的 getters 方法,保存到 store 实例中的 getters 对象中: 借助 Vue 原生 ...
Vuex中mutations的用法
Vuex中mutations的用法在 Vuex 中 store 数据改变的唯一方法就是提交 mutations.mutations里面装着一些改变数据方法的集合,这是Vuex 设计很重要的一点,就是 ...
thinkphp模型中的获取器和修改器（根据字段名自动调用模型中的方法）
thinkphp模型中的获取器和修改器(根据字段名自动调用模型中的方法) 一.总结记得看下面 1.获取器的作用是在获取数据的字段值后自动进行处理 2.修改器的作用是可以在数据赋值的时候自动进行转换处 ...
kotlin调用类中的方法_一种轻松的方法来测试Kotlin中令人沮丧的静态方法调用
kotlin调用类中的方法 by Oleksii Fedorov 通过Oleksii Fedorov 一种轻松的方法来测试Kotlin中令人沮丧的静态方法调用 (A stress-free way t ...
asp.net页面调用cs中的方法
其中GetArea 在cs文件中的方法, GetArea(string provincecode, string citycode, string areacode) 在页面中可以这样调用cs中的方法 ...
为什要使用BindService?为了调用服务中的方法
MainActivity类: package com.itheima74.whybindservice.service; import android.app.Service; import andr ...
在form2中调用form1中的方法并改变form1中控件值的另一种方法
在窗体编程中,经常碰到到要在form2中调用form1中的方法并改变form1中控件值,但是又不能用new form1这种方法,因为这是生成一个实例. 网上有些说法是用委托和事件,笔者尝试没有成功,可 ...
反射_通过反射调用类中指定方法、属性
一.调用指定方法通过反射,调用类中的方法,通过Method类完成.步骤: 1.通过Class类的getMethod(String name,Class.......parameterTypes)方法 ...

一位面试者提到直接调用vuex中mutations方法

一位面试者提到直接调用vuex中mutations方法相关推荐

最新文章

热门文章