浅谈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 相关文章推荐
js类中获取外部函数名的方法
Aug 19 Javascript
javascript中使用replaceAll()函数实现字符替换的方法
Dec 25 Javascript
yepnope.js 异步加载资源文件
Sep 08 Javascript
js和php如何获取当前url的内容
Sep 22 Javascript
nodeType属性返回被选节点的节点类型介绍
Nov 22 Javascript
键盘KeyCode值列表汇总
Nov 26 Javascript
jquery ajax jsonp跨域调用实例代码
Dec 11 Javascript
浅析javascript中function 的 length 属性
May 27 Javascript
jquery实现的下拉和收缩效果示例
Aug 21 Javascript
jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
Apr 08 Javascript
利用jQuery异步上传文件的插件用法详解
Jul 19 jQuery
vue-i18n实现中英文切换的方法
Jul 06 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
php实现获取局域网所有用户的电脑IP和主机名、及mac地址完整实例
2014/07/18 PHP
php生成不重复随机数、数组的4种方法分享
2015/03/30 PHP
PHP面向对象编程之深入理解方法重载与方法覆盖(多态)
2015/12/24 PHP
thinkPHP框架实现多表查询的方法
2018/06/14 PHP
ppk谈JavaScript style属性
2008/10/10 Javascript
类似GMAIL的Ajax信息反馈显示
2010/02/16 Javascript
20款超赞的jQuery插件 Web开发人员必备
2011/02/26 Javascript
ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
2012/02/03 Javascript
jquery禁止回车触发表单提交
2014/12/12 Javascript
vue.js表格分页示例
2016/10/18 Javascript
详解nodejs微信公众号开发——6.自定义菜单
2017/04/13 NodeJs
jQuery实现的表格前端排序功能示例
2017/09/18 jQuery
vue单页应用的内存泄露定位和修复问题小结
2019/08/02 Javascript
Vue-cli3.X使用px2 rem遇到的问题及解决方法
2019/08/08 Javascript
在vue中使用inheritAttrs实现组件的扩展性介绍
2020/12/07 Vue.js
使用Python操作Elasticsearch数据索引的教程
2015/04/08 Python
Python实现读取txt文件并转换为excel的方法示例
2018/05/17 Python
python3实现域名查询和whois查询功能
2018/06/21 Python
python框架中flask知识点总结
2018/08/17 Python
python3.7 sys模块的具体使用
2019/07/22 Python
基于numpy中的expand_dims函数用法
2019/12/18 Python
如何使用python socket模块实现简单的文件下载
2020/09/04 Python
夏威夷航空官网:Hawaiian Airlines
2016/09/11 全球购物
学前教育毕业生自荐信范文
2013/12/24 职场文书
文明宿舍获奖感言
2014/02/07 职场文书
社会工作专业求职信
2014/07/15 职场文书
服务行业演讲稿
2014/09/02 职场文书
重阳节演讲稿:尊敬帮助老人 弘扬传统美德
2014/09/25 职场文书
2014年妇女工作总结
2014/12/06 职场文书
展览会邀请函
2015/02/02 职场文书
大学生求职简历自我评价
2015/03/02 职场文书
高中生综合素质自我评价
2015/03/06 职场文书
2015年中学图书馆工作总结
2015/07/22 职场文书
小学作文之描写天气
2019/08/15 职场文书
《游戏王:大师决斗》新活动上线 若无符合卡组可免费租用
2022/04/13 其他游戏
Win11 Beta 预览版 22621.575 和 22622.575更新补丁KB5016694发布(附更新内容大全)
2022/08/14 数码科技