博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
一位面试者提到直接调用vuex中mutations方法
阅读量:5316 次
发布时间:2019-06-14

本文共 1158 字,大约阅读时间需要 3 分钟。

简述是用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

你可能感兴趣的文章
打印图片的属性和实现另存图片功能以及使用numpy
查看>>
IOS-网络(大文件下载)
查看>>
基于MySQL的高可用可扩展架构探讨
查看>>
linux系统服务设置命令--chkconfig命令参数及用法详解
查看>>
0714M
查看>>
动态加载vs静态加载
查看>>
ajax跨域请求的问题
查看>>
(7)关于margin的一些想法2.0
查看>>
GDB调试qemu-kvm
查看>>
C#类与结构体究竟谁快——各种函数调用模式速度评测
查看>>
程序员求职之道(《程序员面试笔试宝典》)之学业与求职,孰轻孰重?
查看>>
Windows API GetVersionEx()判断系统版本详解
查看>>
我到底要选择一种什么样的生活方式,度过这一辈子呢:人生自由与职业发展方向(下)...
查看>>
一些有意思的算法代码[转载]
查看>>
redis下并发问题解决方案
查看>>
poj 题目分类
查看>>
An easy problem
查看>>
windows 安装yaml支持和pytest支持等
查看>>
读书笔记:季羡林关于如何做研究学问的心得
查看>>
面向对象的优点
查看>>