浅谈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 相关文章推荐
基于KMP算法JavaScript的实现方法分析
May 03 Javascript
判断在css加载完毕后执行后续代码示例
Sep 03 Javascript
JS仿iGoogle自定义首页模块拖拽特效的方法
Feb 13 Javascript
JavaScript中的this关键字使用方法总结
Mar 13 Javascript
基于Javascript实现二级联动菜单效果
Mar 04 Javascript
Javascript点击按钮随机改变数字与其颜色
Sep 01 Javascript
jQuey将序列化对象在前台显示地实现代码(方法总结)
Dec 13 Javascript
jQuery实现滚动条滚动到子元素位置(方便定位)
Jan 08 Javascript
jquery实现异步加载图片(懒加载图片一种方式)
Apr 24 jQuery
vue+axios实现登录拦截的实例代码
May 22 Javascript
详解vue中的父子传值双向绑定及数据更新问题
Jun 13 Javascript
vue 接口请求地址前缀本地开发和线上开发设置方式
Aug 13 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
thinkphp的CURD和查询方式介绍
2013/12/19 PHP
PHP实现数组递归转义的方法
2014/08/28 PHP
Yii框架日志记录Logging操作示例
2018/07/12 PHP
PHP文件后缀不强制为.php方法
2019/03/31 PHP
javascript function、指针及内置对象
2009/02/19 Javascript
jquery实现不同大小浏览器使用不同的css样式表的方法
2014/04/02 Javascript
javascript制作网页图片上实现下雨效果
2015/02/26 Javascript
jQuery()方法的第二个参数详解
2015/04/29 Javascript
js操作数组函数实例小结
2015/12/10 Javascript
JavaScript黑洞数字之运算路线查找算法(递归算法)实例
2016/01/28 Javascript
深入浅出 jQuery中的事件机制
2016/08/23 Javascript
js实现登录框鼠标拖拽效果
2017/03/09 Javascript
js匿名函数使用&amp;传参(实例)
2017/09/08 Javascript
vue引入jq插件的实例讲解
2017/09/12 Javascript
Javascript将图片的绝对路径转换为base64编码的方法
2018/01/11 Javascript
angular4 JavaScript内存溢出问题
2018/03/06 Javascript
Vue组件Draggable实现拖拽功能
2018/12/01 Javascript
JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析
2019/03/06 Javascript
JS/jQuery实现获取时间的方法及常用类完整示例
2019/03/07 jQuery
Vue+ElementUI table实现表格分页
2019/12/14 Javascript
Python切片用法实例教程
2014/09/08 Python
python用TensorFlow做图像识别的实现
2020/04/21 Python
在echarts中图例legend和坐标系grid实现左右布局实例
2020/05/16 Python
最新pycharm安装教程
2020/11/18 Python
纯HTML+CSS3制作导航菜单(附源码)
2013/04/24 HTML / CSS
美国批发零售网站:GearXS
2016/07/26 全球购物
澳大利亚领先的宠物用品商店:VetSupply
2017/09/08 全球购物
Herschel Supply Co.美国:背包、手提袋及配件
2020/11/24 全球购物
Boolean b = new Boolean(“abcde”); 会编译错误码
2013/11/27 面试题
幼儿园中班开学寄语
2014/04/03 职场文书
缅怀革命先烈演讲稿
2014/05/14 职场文书
信用卡工作证明模板
2014/09/14 职场文书
医院党建工作总结2015
2015/05/26 职场文书
Go语言实现Base64、Base58编码与解码
2021/07/26 Golang
Redis中有序集合的内部实现方式的详细介绍
2022/03/16 Redis
MySQL脏读,幻读和不可重复读
2022/05/11 MySQL