Vuex mutitons和actions初使用详解


Posted in Javascript onMarch 04, 2019

Mutations

mutations 必须是同步函数,为什么?

举个例子:  官方案例

mutations: {
 someMutation (state) {
  api.callAsyncMethod(() => {
   state.count++
  })
 }
}

我们都知道任何回调函数中进行的状态改变都是无法追踪的,  devtools会对mutations的每一条提交做记录,记录上一次提交之前和提交之后的状态,在上面的例子中无法实现捕捉状态,因为在执行mutations时,内部回调函数还没有执行,

所以此时无法捕捉状态.

再简单来讲,就像大家都吃过核桃,核桃刚产下来的时候是带一层绿色的皮的,我们需要将绿色烧掉,弄掉了,才是我们在市场上见到的只有外面硬壳的核桃,如果我们只剥去绿皮,是不能直接吃的,因为还有一层壳胡着呢.

Actions

vuex肯定不甘示弱,为了解决mutations只有同步的问题,提出了actions(异步),专门用来解决mutations只有同步无异步的问题.

1. 首先先了解一下actions

(1).MUTATIONS

const state = {

xxx: null

},

const mutations = {


[setState](state, value) {



state.xxx = value


}

}

此处value可以是对象,可以是值等

组件调用方式: this.$store.commit('setState', [value])

(2).ACTIONS

// 第一种写法简写形式

const actions = {


[addPlus]({commit}) { // 简写方式,待研究



commit('[setState]', value)



//此处value可以是对象,可以是固定值等


}

}

// 第二种形式

const actions = {


[addPlus](context) {



//context 官方给出的指定对象, 此处context可以理解为store对象



context.commit('[setState]', value)


}

}

/* 两处的commit都是提交的mutations中的字符串的事件类型名称,对应会调用mutations中的回调函数 */

actions在组件中的调用方式: 

import mapActions from 'vuex'

methods: {


...mapActions: ([


 'addPlus' 


]),


setAddPlus () {



this.$store.dispatch('addPlus', [value]) // 异步调用mutations


}

}

Vuex 状态管理

Vuex 依赖于 Vue 用来管理 Vue 项目状态

状态的修改依赖于 commit 和 dispatch

import Vue from 'Vue';
import Vuex from 'Vuex';

export default new Vuex.Store({
  state:{
    count:100
  },
  mutations:{
    change(state,payload){
      state.count += payload;
    }
  },
  actions:{
    change(context,palyload){
      context.commit('change',palyload);// 异步触发 mutaiton
    }
  },
  getters:{
    getCount(){
      return state.count;
    }
  }
})
{{$store.state.count}}
<button @click="commitChange">更改count</button>
<button @click="dispatchChange">更改count</button>

...

methods:{
  commitChange(){
    this.$store.commit('change',1);
  },
  dispatchChange(){
    this.$sotre.dispatch('change',10);
  }
}

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

Javascript 相关文章推荐
tagName的使用,留一笔
Jun 26 Javascript
比较简单实用的使用正则三种版本的js去空格处理方法
Nov 18 Javascript
jquery移动listbox的值原理及代码
May 03 Javascript
浅谈jquery回调函数callback的使用
Jan 30 Javascript
jQuery搜索同辈元素方法
Feb 10 Javascript
Angular.js中ng-if、ng-show和ng-hide的区别介绍
Jan 20 Javascript
Vue Spa切换页面时更改标题的实例代码
Jul 15 Javascript
基于LayUI实现前端分页功能的方法
Jul 22 Javascript
Element中的Cascader(级联列表)动态加载省\市\区数据的方法
Mar 27 Javascript
解决vue自定义指令导致的内存泄漏问题
Aug 04 Javascript
Vue实现腾讯云点播视频上传功能的实现代码
Aug 17 Javascript
vue中watch和computed的区别与使用方法
Aug 23 Javascript
JS重学系列之聊聊new操作符
Mar 04 #Javascript
jQuery实现的导航条点击后高亮显示功能示例
Mar 04 #jQuery
ES10 特性的完整指南小结
Mar 04 #Javascript
node.js使用express框架进行文件上传详解
Mar 03 #Javascript
微信小程序新手教程之启动页的重要性
Mar 03 #Javascript
微信小程序新手教程之页面打开数量限制
Mar 03 #Javascript
JS实现的冒泡排序,快速排序,插入排序算法示例
Mar 02 #Javascript
You might like
php输出echo、print、print_r、printf、sprintf、var_dump的区别比较
2013/06/21 PHP
ThinkPHP内置jsonRPC的缺陷分析
2014/12/18 PHP
PHP几个实用自定义函数小结
2016/01/25 PHP
FleaPHP框架数据库查询条件($conditions)写法总结
2016/03/19 PHP
PHP会话控制实例分析
2016/12/24 PHP
PHP实现动态创建XML文档的方法
2018/03/30 PHP
jQuery Ajax之$.get()方法和$.post()方法
2009/10/12 Javascript
JQuery 选择和过滤方法代码总结
2010/11/19 Javascript
JQuery实现鼠标移动到图片上显示边框效果
2014/01/09 Javascript
jquery制作搜狐快站页面效果示例分享
2014/02/21 Javascript
jquery+css实现绚丽的横向二级下拉菜单-附源码下载
2015/08/23 Javascript
jQuery轻松实现表格的隔行变色和点击行变色的实例代码
2016/05/09 Javascript
javascript数据类型详解
2017/02/07 Javascript
微信小程序 仿猫眼实现实例代码
2017/03/14 Javascript
浅谈layui 表单元素的选中问题
2019/10/25 Javascript
vue使用微信扫一扫功能的实现代码
2020/04/11 Javascript
[00:32]DOTA2上海特级锦标赛 Ehome战队宣传片
2016/03/03 DOTA
高性能web服务器框架Tornado简单实现restful接口及开发实例
2014/07/16 Python
web.py在模板中输出美元符号的方法
2014/08/26 Python
简单介绍Python2.x版本中的cmp()方法的使用
2015/05/20 Python
Flask框架响应、调度方法和蓝图操作实例分析
2018/07/24 Python
python3利用Socket实现通信的方法示例
2019/05/06 Python
python的sorted用法详解
2019/06/25 Python
学习Python列表的基础知识汇总
2020/03/10 Python
Python新手学习装饰器
2020/06/04 Python
python 用opencv实现图像修复和图像金字塔
2020/11/27 Python
Python 微信公众号文章爬取的示例代码
2020/11/30 Python
公共事业管理本科生求职信
2013/10/07 职场文书
《雷鸣电闪波尔卡》教学反思
2014/02/23 职场文书
入股协议书
2014/04/14 职场文书
优秀学生党员先进事迹材料
2014/05/29 职场文书
党员学习群众路线教育实践活动对照检查材料
2014/09/23 职场文书
群众路线教育实践活动个人对照检查材料思想汇报(社区班子)
2014/10/06 职场文书
优秀党员推荐材料
2014/12/18 职场文书
2019年个人工作总结范文
2019/03/25 职场文书
竞聘开场白方式有哪些?
2019/08/28 职场文书