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 相关文章推荐
jQuery开发者都需要知道的5个小技巧
Jan 08 Javascript
jQuery 自动增长的文本输入框实现代码
Apr 02 Javascript
jquery实现的点击翻书效果代码
Nov 04 Javascript
基于AngularJS前端云组件最佳实践
Oct 20 Javascript
jQuery模拟实现的select点击选择效果【附demo源码下载】
Nov 09 Javascript
基于AngularJS的简单使用详解
Sep 10 Javascript
JS库particles.js创建超炫背景粒子插件(附源码下载)
Sep 13 Javascript
微信小程序 swiper组件构建轮播图的实例
Sep 20 Javascript
使用Vue完成一个简单的todolist的方法
Dec 01 Javascript
vue 权限认证token的实现方法
Jul 17 Javascript
js实现贪吃蛇游戏 canvas绘制地图
Sep 09 Javascript
vue项目中使用rem,在入口文件添加内容操作
Nov 11 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
mysq GBKl乱码
2006/11/28 PHP
PHP5 面向对象(学习记录)
2009/12/02 PHP
PHP无法访问远程mysql的问题分析及解决
2013/05/16 PHP
屏蔽PHP默认设置中的Notice警告的方法
2016/05/20 PHP
三个思路解决laravel上传文件报错:413 Request Entity Too Large问题
2017/11/13 PHP
详解PHP 二维数组排序保持键名不变
2019/03/06 PHP
php 下 html5 XHR2 + FormData + File API 上传文件操作实例分析
2020/02/28 PHP
js获取ajax返回值代码
2014/04/30 Javascript
jquery实现图片随机排列的方法
2015/05/04 Javascript
浅谈JS中逗号运算符的用法
2016/06/12 Javascript
Backbone View 之间通信的三种方式
2016/08/09 Javascript
Vue.js每天必学之计算属性computed与$watch
2016/09/05 Javascript
angularJs中datatable实现代码
2017/06/03 Javascript
package.json文件配置详解
2017/06/15 Javascript
小程序图片剪裁加旋转的示例代码
2018/07/10 Javascript
详解微信小程序文件下载--视频和图片
2019/04/24 Javascript
vue切换菜单取消未完成接口请求的案例
2020/11/13 Javascript
一篇超完整的Vue新手入门指导教程
2020/11/18 Vue.js
[46:20]TFT vs Secret Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
[02:46]完美世界DOTA2联赛PWL DAY4集锦
2020/11/03 DOTA
Python 检查数组元素是否存在类似PHP isset()方法
2014/10/14 Python
使用python爬虫实现网络股票信息爬取的demo
2018/01/05 Python
详解Selenium+PhantomJS+python简单实现爬虫的功能
2019/07/14 Python
python多环境切换及pyenv使用过程详解
2019/09/27 Python
pytorch中的上采样以及各种反操作,求逆操作详解
2020/01/03 Python
python GUI库图形界面开发之PyQt5下拉列表框控件QComboBox详细使用方法与实例
2020/02/27 Python
python利用faker库批量生成测试数据
2020/10/15 Python
css3 仿写阿里云水纹效果的示例代码
2018/02/10 HTML / CSS
英国Flybe航空官网:欧洲最大的独立支线廉价航空公司
2019/07/15 全球购物
地理科学专业毕业生求职信
2013/10/15 职场文书
汽车工程专业应届生求职信
2013/10/19 职场文书
通信工程专业毕业生推荐信
2013/12/25 职场文书
2014年社区国庆节活动方案
2014/09/16 职场文书
诉讼代理人授权委托书
2014/10/11 职场文书
2015年党员公开承诺事项
2015/04/27 职场文书
Oracle 数据仓库ETL技术之多表插入语句的示例详解
2021/04/12 Oracle