浅谈vuex之mutation和action的基本使用


Posted in Javascript onAugust 29, 2017

我们要实现的很简单,就是点击+1的count加一,点击-1的时候count-1

浅谈vuex之mutation和action的基本使用

一、mutation

在vue 中,只有mutation 才能改变state.  mutation 类似事件,每一个mutation都有一个类型和一个处理函数,因为只有mutation 才能改变state, 所以处理函数自动会获得一个默认参数 state. 所谓的类型其实就是名字,action去commit 一个mutation, 它要指定去commit哪个mutation, 所以mutation至少需要一个名字,commit mutation 之后, 要做什么事情,那就需要给它指定一个处理函数, 类型(名字) + 处理函数就构成了mutation. 现在test.js添加mutation.

const store = new Vuex.Store({
  state: {
    count:0
  },
  mutations: {
    // 加1
    increment(state) {
      state.count++;
    },
    // 减1
    decrement(state) {
      state.count--
    }
  }
})

Vue 建议我们mutation 类型用大写常量表示,修改一下,把mutation 类型改为大写

mutations: {
    // 加1
    INCREMENT(state) {
      state.count++;
    },
    // 减1
    DECREMENT(state) {
      state.count--
    }
  }

二、action

action去commit mutations, 所以还要定义action. test.js 里面添加actions.

const store = new Vuex.Store({
  state: {
    count:0
  },
  mutations: {
    // 加1
    INCREMENT(state) {
      state.count++;
    },
    // 减1
    DECREMENT(state) {
      state.count--
    }
  },
  actions: {
    increment(context) {
      context.commit("INCREMENT");
    },
    decrement(context) {
      context.commit("DECREMENT");
    }
  }
})

action 和mutions 的定义方法是类似的,我们要dispatch 一个action, 所以actions 肯定有一个名字,dispatch action 之后它要做事情,就是commit mutation, 所以还要给它指定一个函数。因为要commit mutation ,所以 函数也会自动获得一个默认参数context,  它是一个store 实例,通过它可以获取到store 实例的属性和方法,如 context.state 就会获取到 state 属性, context.commit 就会执行commit命令。

其实actions 还可以简写一下, 因为函数的参数是一个对象,函数中用的是对象中一个方法,我们可以通过对象的解构赋值直接获取到该方法。修改一下 actions

actions: {
    increment({commit}){
      commit("INCREMENT")
    },
    decrement({commit}){
      commit("DECREMENT")
    }
  }

三、dispatch  action

现在就剩下dispatch action 了。什么时候dispatch action 呢? 只有当我们点击按钮的时候. 给按钮添加click 事件,在click 事件处理函数的中dispatch action.

这个时候我们需要新建一个操作组件,我们暂且命名为test.vue

<template>
 <div>
  <div>
    <button @click="add">+1</button>
    <button @click="decrement">-1</button>
  </div>
 </div>
</template>

然后,我们在methods里面获取这两个操作事件

<script>
  export default {
    methods: {
      increment(){
        this.$store.dispatch("increment");
      },
      decrement() {
        this.$store.dispatch("decrement")
      }
    }
  }
</script>

当然上面这种写法比较麻烦,vuex还给我我们提供了mapActions这个函数,它和mapState 是一样的,把我们的 action 直接映射到store 里面的action中。

<script>

  import {mapActions} from 'vuex'
  export default {
    methods: {
      ...mapActions(['increment', 'decrement'])
    }
  }
</script>

如果事件处理函数名字和action的名字不同,给mapActions

提供一个对象,对象的属性是事件处理函数名字, 属性值是 对应的dispatch 的action 的名字。

<script>
import {mapActions} from 'vuex'
export default {
 methods: {
  // 这中写法虽然可行,但是比较麻烦
  // 这时vue 提供了mapAction 函数,
  // 它和mapState 是一样的,把我们的 action 直接映射到store 里面的action中。
  // increment () {
  //  this.$store.dispatch('increment')
  // },
  // decrement () {
  //  this.$store.dispatch('decrement')
  // }
  // 下面我们使用一种比较简洁的写法
  // ...mapActions(['increment', 'decrement'])
  /**
   如果事件处理函数名字和action的名字不同,给mapActions
   提供一个对象,对象的属性是事件处理函数名字, 属性值是 对应的dispatch 的action 的名字。
  */
  // 这里实际是为了改变事件的名字
  ...mapActions(['decrement']),
  ...mapActions({
   add: 'increment'
  })
 }
}
</script>

这时候我们单击按钮,就可以看到count 发生变化。

最后附一张简单的图形解析,看起来应该能更直观一点

浅谈vuex之mutation和action的基本使用

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jQuery架构javascript基础体系
Jan 01 Javascript
jquery处理json数据实例分析
Jun 03 Javascript
基于javascript实现tab选项卡切换特效调试笔记
Mar 30 Javascript
关于jquery中动态增加select,事件无效的快速解决方法
Aug 29 Javascript
vue2.0全局组件之pdf详解
Jun 26 Javascript
基于百度地图api清除指定覆盖物(Overlay)的方法
Jan 26 Javascript
在Angular中使用JWT认证方法示例
Sep 10 Javascript
在Vue中使用axios请求拦截的实现方法
Oct 25 Javascript
开发中常用的25个JavaScript单行代码(小结)
Jun 28 Javascript
Vue中jsx不完全应用指南小结
Nov 01 Javascript
jquery添加div实现消息聊天框
Feb 08 jQuery
微信小程序开发(二):页面跳转并传参操作示例
Jun 01 Javascript
vuex学习之Actions的用法详解
Aug 29 #Javascript
jquery在vue脚手架中的使用方式示例
Aug 29 #jQuery
jQuery 实现鼠标画框并对框内数据选中的实例代码
Aug 29 #jQuery
es6学习之解构时应该注意的点
Aug 29 #Javascript
页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)
Aug 29 #Javascript
详谈Node.js之操作文件系统
Aug 29 #Javascript
js链表操作(实例讲解)
Aug 29 #Javascript
You might like
便携利器 — TECSUN PL-365简评
2021/03/02 无线电
Ajax+PHP边学边练 之五 图片处理
2009/12/03 PHP
使用PHP 5.0创建图形的巧妙方法
2010/10/12 PHP
PHP Class&amp;Object -- PHP 自排序二叉树的深入解析
2013/06/25 PHP
使用PHP导出Word文档的原理和实例
2013/10/21 PHP
Linux下手动编译安装PHP扩展的例子分享
2014/07/15 PHP
教你在header中隐藏php的版本信息
2016/08/10 PHP
php preg_match的匹配不同国家语言实例
2016/12/29 PHP
laravel框架实现后台登录、退出功能示例
2019/10/31 PHP
两个SUBMIT按钮,如何区分处理
2006/08/22 Javascript
用js实现手把手教你月入万刀(转贴)
2007/11/07 Javascript
用原生JS获取CLASS对象(很简单实用)
2014/10/15 Javascript
JavaScript实现弹出子窗口并传值给父窗口
2014/12/18 Javascript
JavaScript使用cookie记录临时访客信息的方法
2015/04/07 Javascript
JS+CSS实现TreeMenu二级树形菜单完整实例
2015/09/18 Javascript
基于jQuery的网页影音播放器jPlayer的基本使用教程
2016/03/08 Javascript
5个最顶级jQuery图表类库插件【jquery插件库】
2016/05/05 Javascript
Highcharts学习之数据列
2016/08/03 Javascript
VUE中v-model和v-for指令详解
2017/06/23 Javascript
angular+ionic返回上一页并刷新页面
2017/08/08 Javascript
vue解决跨域路由冲突问题思路解析
2017/11/03 Javascript
在angularJs中进行数据遍历的2种方法
2018/10/08 Javascript
js实现图片推拉门效果代码实例
2019/05/18 Javascript
js实现简单贪吃蛇游戏
2020/05/15 Javascript
vue axios封装httpjs,接口公用配置拦截操作
2020/08/11 Javascript
Python中使用插入排序算法的简单分析与代码示例
2016/05/04 Python
python hough变换检测直线的实现方法
2019/07/12 Python
Python2 与Python3的版本区别实例分析
2020/03/30 Python
解决Keras的自定义lambda层去reshape张量时model保存出错问题
2020/07/01 Python
Django REST Framework 分页(Pagination)详解
2020/11/30 Python
天猫超市:阿里巴巴打造的网上超市
2016/11/02 全球购物
会计岗位描述
2014/02/22 职场文书
代领学位证书毕业证书委托书
2014/09/30 职场文书
夫妻房产协议书的格式
2014/10/11 职场文书
初中英语教师个人工作总结2015
2015/07/21 职场文书
闭幕词的写作格式与范文!
2019/06/24 职场文书