浅谈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 相关文章推荐
学习ExtJS(一) 之基础前提
Oct 07 Javascript
JQuery入门——事件切换之hover()方法应用介绍
Feb 05 Javascript
jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
Apr 08 Javascript
jquery文本框中的事件应用以输入邮箱为例
May 06 Javascript
一个简单的动态加载js和css的jquery代码
Sep 01 Javascript
c#+jquery实现获取radio和checkbox的值
Sep 12 Javascript
jQuery动态生成表格及右键菜单功能示例
Jan 13 Javascript
Vue.js仿Metronic高级表格(二)数据渲染
Apr 19 Javascript
实例详解JSON取值(key是中文或者数字)方式
Aug 24 Javascript
浅谈 vue 中的 watcher
Dec 04 Javascript
vue使用element-ui的el-input监听不了回车事件的解决方法
Jan 12 Javascript
vue实现移动端div拖动效果
Mar 03 Vue.js
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
php 模拟POST|GET操作实现代码
2010/07/20 PHP
php页面缓存ob系列函数介绍
2012/10/18 PHP
php连接Access数据库错误及解决方法
2013/06/20 PHP
php中有关合并某一字段键值相同的数组合并的改进
2015/03/10 PHP
php判断是否为ajax请求的方法
2016/11/29 PHP
javascript 动态修改样式和层叠样式表代码
2010/04/27 Javascript
javascript 实现简单的table排序及table操作练习
2012/12/28 Javascript
js中页面的重新加载(当前页面/上级页面)及frame或iframe元素引用介绍
2013/01/24 Javascript
js传中文参数controller里获取参数乱码问题解决方法
2014/01/03 Javascript
AngularJS的内置过滤器详解
2015/05/14 Javascript
详解javascript new的运行机制
2016/01/26 Javascript
不能不知道的10个angularjs英文学习网站
2016/03/23 Javascript
Bootstrap 树控件使用经验分享(图文解说)
2017/11/06 Javascript
vue+iview动态渲染表格详解
2019/03/19 Javascript
JS实现li标签的删除
2019/04/12 Javascript
原生JS实现无缝轮播图片
2020/06/24 Javascript
JavaScript实现与web通信的方法详解
2020/08/07 Javascript
小程序实现上传视频功能
2020/08/18 Javascript
微信小程序实现签到弹窗动画
2020/09/21 Javascript
微信小程序实现日历小功能
2020/11/18 Javascript
跟老齐学Python之从格式化表达式到方法
2014/09/28 Python
动感网页相册 python编写简单文件夹内图片浏览工具
2016/08/17 Python
python opencv设置摄像头分辨率以及各个参数的方法
2018/04/02 Python
python url 参数修改方法
2018/12/26 Python
Python之Matplotlib文字与注释的使用方法
2020/06/18 Python
python数据类型强制转换实例详解
2020/06/22 Python
Python 带星号(* 或 **)的函数参数详解
2021/02/23 Python
意大利奢侈品网站:Italist
2016/08/23 全球购物
Shoes For Crews法国官网:美国领先的防滑鞋设计和制造商
2018/01/01 全球购物
英国现代家具和照明购物网站:Heal’s
2019/10/30 全球购物
JoJo Maman Bébé爱尔兰官网:英国最受欢迎的精品母婴品牌
2020/12/20 全球购物
医学护理毕业生自荐信
2013/11/07 职场文书
家长评语和期望
2014/02/10 职场文书
领导干部个人整改措施落实情况汇报
2014/10/29 职场文书
2015年感恩节活动总结
2015/03/24 职场文书
公司搬迁通知
2015/04/20 职场文书