介绍mapActions辅助函数:

Action提交的是Mutation,不能够直接修改state中的状态,而Mutations是可以直接修改state中状态的;
Action是支持异步操作的,而Mutations只能是同步操作。

简单的:

const mutations = {
add(state,val){
state.count++
},
reduce(state, val){
state.count --
}
}
const actions = {
//这里的actionAdd是组件中和所触发的事件相对应的方法
actionAdd(context){
context.commit('add')//这里的add是mutations中的方法
},
//这里是通过参数结构来简化代码。
actionReduce( { commit } ){
commit('reduce')
}

    Actions接受一个context对象参数,该参数具有和store实例相同的属性和方法,所以我们可以通过context.commit()提交mutations中的方法,

    或者可以通过context.state和context.getters去获取state和getters。

    context作为上下文对象,有共享store实例的属性和方法的权利,但是切记:context并不是store实例本身。

    { commit } 这里直接把commit为属性的对象传过来,简化代码。

Action 通过 store.dispatch 方法触发
add() {
this.$store.dispatch('actionAdd')
},
reduce() {
this.$store.dispatch('actionReduce')
}
Actions支持同样的载荷方式和对象进行分发:
add() {
this.$store.dispatch('actionAdd', {
id: 1
})
},
reduce() {
this.$store.dispatch({
type: 'actionReduce',
id: 2
})
}
actions里对应的方法中第二个参数接受分发是传递的值
<button @click = 'countAdd'>+</button>
<button @click = 'countReduce'>-</button> --------------------------------------------------------
import { mapState, mapMutations, mapActions } from 'vuex'
methods: {
//如果名字不同,使用mapActions辅助函数的对象参数
//...mapActions( { add: 'countAdd', reduce: 'countReduce'} )
//当action中的函数名和组件节点的方法名相同的时候,使用mapActions辅助函数的数组参数
...mapActions( ['countAdd', 'countReduce'] ) }

关于mapState和mapMutations和mapGetters 和mapActions辅助函数的用法及作用(四)-----mapActions的更多相关文章

  1. 关于mapState和mapMutations和mapGetters 和mapActions辅助函数的用法及作用(二)-----mapMutations

    在组件中提交Mutations: import { mapState, mapMutations } from 'vuex' export default { data() { return { ms ...

  2. 关于mapState和mapMutations和mapGetters 和mapActions辅助函数的用法及作用(三)-----mapGetters

    简单的理解: const getters = { newCount: function(state){ return state.count += 5; } } ------------------- ...

  3. 关于mapState和mapMutations和mapGetters 和mapActions辅助函数的用法及作用(一)-----mapState

    一.通过mapState函数的对象参数来赋值: <p>{{ count }}</p> <p>{{ count1 }}</p> <p>{{ c ...

  4. vue:vuex中mapState、mapGetters、mapActions辅助函数及Module的使用

    一.普通store中使用mapState.mapGetters辅助函数: 在src目录下建立store文件夹: ​ index.js如下: import Vue from 'vue'; import ...

  5. vuex中mapState、mapMutations、mapAction的理解

    当一个组件需要获取多个状态时候,将这些状态都声明为计算属性会有些重复和冗余.为了解决这个问题,我们可以使用 mapState 辅助函数帮助我们生成计算属性. // 在单独构建的版本中辅助函数为 Vue ...

  6. vuex学习与实践——mapState、getter、mapGetters

    1.mapState辅助函数 当一个组件需要获取多个状态时候,将这些状态都声明为计算属性会有些重复和冗余.为了解决这个问题,我们可以使用 mapState 辅助函数帮助我们生成计算属性,让你少按几次键 ...

  7. vuex状态管理demo

    vuex状态管理主要包含四个概念  mapState,mapMutations,mapGetters,mapActions. 编写vuex文件夹下面的store.js import Vue from ...

  8. vue使用--vuex快速学习与使用

    什么是vuex? Vuex核心概念 Vuex安装与使用 1.安装 2.目录结构与vuex引入 3.store中变量的定义.管理.派生(getter) 4.vuex辅助函数的使用说明 Vuex刷新数据丢 ...

  9. vuex基础知识总结

    项目中要求添加vuex,根据学习我这个小白总结了一点自己的心得,供大家参考 在学习之前,要知道两件事 为什么要用vuex?vuex要什么场景下应用? 简单点解释一下 1.项目中应用了vue脚手架之后, ...

随机推荐

  1. mktemp temp race attack 临时文件隐患

    /tmp  安全隐患 -/tmp   在家目录  程序目录下 创建 临时文件

  2. XMU 1611 刘备闯三国之卖草鞋 【贪心】

    1611: 刘备闯三国之卖草鞋 Time Limit: 1000 MS  Memory Limit: 64 MBSubmit: 90  Solved: 48[Submit][Status][Web B ...

  3. lambda和抽象类

    lambda的使用条件是‘一个接口仅有一个待实现的方法’: so,lambda不能使用在抽象类上,使用后或提示‘Target type of a lambda conversion must be a ...

  4. docker registry的CI规划

    目前代码全部署在docker中, 考虑用jenkins打包成docker包再推送到docker registry 打包推送过程中自动按照日期打标签,并且刷新latest

  5. CMake 入门实战【转】

    本文转载自:http://www.hahack.com/codes/cmake/ 什么是 CMake All problems in computer science can be solved by ...

  6. Android NDK生成及连接静态库与动态库

    对于Android应用开发,大部分情况下我们使用Java就能完整地实现一个应用.但是在某些情况下,我们需要借助C/C++来写JNI本地代码.比如,在使用跨平台的第三方库的时候:为了提升密集计算性能的时 ...

  7. Morris Traversal方法遍历二叉树(非递归,不用栈,O(1)空间)——无非是在传统遍历过程中修改叶子结点加入后继结点信息(传统是stack记录),然后再删除恢复

    先看看线索二叉树 n个结点的二叉链表中含有n+1(2n-(n-1)=n+1)个空指针域.利用二叉链表中的空指针域,存放指向结点在某种遍历次序下的前驱和后继结点的指针(这种附加的指针称为"线索 ...

  8. Linux 打包classes

    进入项目后 tar -zcvf ~/${HOSTNAME}-${PWD##*/}-$(date +%Y-%m-%d)-classes.tar.gz webapps/ROOT/WEB-INF/class ...

  9. 并不对劲的bzoj2820:p2257:YY的GCD

    题目大意 \(t\)(\(t\leq10^4\))组数据,给定\(n,m\)(\(n,m\leq10^6\))求 \[\sum_{x=1}^{n}\sum_{y=1}^{m}[gcd(x,y)=1]\ ...

  10. U-Boot编译过程完全分析

    2.1       U-Boot Makefile分析 2.1.1             U-Boot编译命令 对于mini2440开发板,编译U-Boot需要执行如下的命令: $  make  m ...