VUEX中关于 mapActions, mapMutations使用解析

在项目中，经常使用到VUEX状态管理，对于小项目中，直接使用

this.$store.commit('mutaion-name','参数')

或者

this.$store.dispatch('actions-name','参数')

上述两种方法即可。

但是，当项目中的 mutation 或者 action 过多的时候，这样一个个的写就显得比较麻烦。

所以，vue提供了 mapActions和mapMutations 。两者使用方法相似，下面以 mapActions为例。

一、引入 mapActions

import { mapActions } from 'vuex'复制代码

二、进行解构赋值和拓展运算

export default {// ...methods: {//下述中的 ... 是拓展运算符// 使用 [] 是解构赋值...mapActions(['increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`// `mapActions` 也支持载荷：'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`]),...mapActions({add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`})}
}复制代码

解析：

1. mapActions 必须放在 methods中，因为 action 或者 mutation 都是方法.

2. mapAction 里面事store 里面的集合，所以使用ES6中解构赋值的方法进行获取我们所需的方法。

解构赋值不太了解的，点击这里: juejin.im/post/5c02b1…

3. mapAction 前面的 ( ... ) 是ES6中拓展运算符，对我们所需的方法从数组中拓展出来。

数组拓展运算符不太了解的，点击这里:juejin.im/post/5c02b1…

4. ES6对象中同名属性可以简写。

对象简写不太了解的，点击这里:juejin.im/post/5c02b1…

5. 也可以自己命名不同函数名来映射 action方法

转载于:https://juejin.im/post/5cf9ba856fb9a07ef63fce62

VUEX中关于 mapActions, mapMutations使用解析相关推荐

vuex中mapGetters,mapActions使用
vuex运行流程图如下 1.Vue Components 是我们的 vue 组件,组件会触发(dispatch)一些事件或动作,也就是图中的 Actions 2.我们在组件中发出的动作,肯定是想获取或 ...
vuex中mapState和mapMutations用法
// 1导入 Vue 和Vuex import Vue from 'vue' import Vuex from 'vuex' // user.js 就是分模块导入, moduleUser 导入的名字随 ...
[vue] Vuex中四个map方法的使用 mapState mapGetters mapActions mapMutations
1. mapState方法: 用于帮助我们映射state中的数据为计算属性 computed: {//借助mapState生成计算属性:sum.school.subject(对象写法)...mapSt ...
Vue教程5【vuex】getters,mapState,mapGetters,mapActions,mapMutations,模块化namespace
vuex 什么时候需要使用? 状态(数据)共享! vuex工作原理搭建vuex环境创建文件 src/store/index.js//全局安装[--save生产环境] npm install -g ...
vuex 中出现[vuex] module namespace not found in mapActions(): money找不到的报错
使用辅助函数解释小仓库模块的state. vuex 中出现[vuex] module namespace not found in mapActions(): money找不到的报错要在小仓库模块中 ...
vue之mapMutaions的使用 vuex中 action 用法示例 api.js的使用
vue之mapMutations的使用我们通过Mutation来改变store中的state,方法往往是在子组件中使用 this.$store.commit(); 来实现,但是这样的缺点是不容易查看 ...
Vuex中的核心方法
Vuex中的核心方法 Vuex是一个专为Vue.js应用程序开发的状态管理模式,其采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.每一个Vuex应用的核心就是 ...
Vuex中mutations与actions的区别与用法
一.区别操作描述 mutations 一般用于方法同步调用,修改vuex中state的状态. actions 一般用于方法异步调用,多用于请求后台接口. 注:mutations 同步操作,不能写异 ...
vuex结合php,vuex中store的使用介绍（附实例）
本篇文章给大家带来的内容是关于vuex中store的使用介绍(附实例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 一.状态管理(vuex)简介 vuex是专为vue.js应用程序 ...

VUEX中关于 mapActions, mapMutations使用解析

VUEX中关于 mapActions, mapMutations使用解析相关推荐

最新文章

热门文章