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 相关文章推荐
复制本贴标题和地址的js代码
Jul 01 Javascript
JavaScript 设计模式学习 Singleton
Jul 27 Javascript
javascript 添加和移除函数的通用方法
Oct 20 Javascript
javascript中clipboardData对象用法详解
May 13 Javascript
纯javascript实现分页(两种方法)
Aug 26 Javascript
javascript实现右下角广告框效果
Feb 01 Javascript
JS中利用localStorage防止页面动态添加数据刷新后数据丢失
Mar 10 Javascript
老生常谈js-react组件生命周期
May 02 Javascript
微信小程序 Buffer缓冲区的详解
Jul 06 Javascript
JavaScript实现树的遍历算法示例【广度优先与深度优先】
Oct 26 Javascript
CKEditor扩展插件:自动排版功能autoformat插件实现方法详解
Feb 06 Javascript
JavaScript Html实现移动端红包雨功能页面
Jan 10 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与MySQL开发中页面出现乱码的一种解决方法
2007/07/29 PHP
php数组函数序列之array_values() 获取数组元素值的函数与方法
2011/10/30 PHP
浅谈php7的重大新特性
2015/10/23 PHP
PHP编程文件处理类SplFileObject和SplFileInfo用法实例分析
2017/07/22 PHP
判断是否输入完毕再激活提交按钮
2006/06/26 Javascript
JQuery一种取同级值的方式(比如你在GridView中)
2012/03/15 Javascript
jQuery控制输入框只能输入数值的小例子
2013/03/20 Javascript
js编写trim()函数及正则表达式的运用
2013/10/24 Javascript
JavaScript1.6数组新特性介绍以及JQuery的几个工具方法
2013/12/06 Javascript
jquery easyui 对于开始时间小于结束时间的判断示例
2014/03/22 Javascript
如何防止回车(enter)键提交表单
2014/05/11 Javascript
基于ajax实现文件上传并显示进度条
2015/08/03 Javascript
WebView启动支付宝客户端支付失败的问题小结
2017/01/11 Javascript
3分钟快速搭建nodejs本地服务器方法运行测试html/js
2017/04/01 NodeJs
Angular学习笔记之集成三方UI框架、控件的示例
2018/03/23 Javascript
vue axios请求成功却进入catch的原因分析
2020/09/08 Javascript
原生JS实现音乐播放器
2021/01/26 Javascript
python多进程操作实例
2014/11/21 Python
Python基于numpy灵活定义神经网络结构的方法
2017/08/19 Python
numpy.linspace 生成等差数组的方法
2018/07/02 Python
python实现剪切功能
2019/01/23 Python
Python爬虫之UserAgent的使用实例
2019/02/21 Python
在Python中构建增广矩阵的实现方法
2019/07/01 Python
Python爬虫:url中带字典列表参数的编码转换方法
2019/08/21 Python
Python接口测试环境搭建过程详解
2020/06/29 Python
Python环境搭建过程从安装到Hello World
2021/02/05 Python
html5基础标签(html5视频标签 html5新标签用法)
2013/12/30 HTML / CSS
HTML5不支持frameset的两种解决方法
2016/11/14 HTML / CSS
美国老牌主机服务商:iPage
2016/07/22 全球购物
Lookfantastic意大利官网:英国知名美妆购物网站
2019/05/31 全球购物
学校领导班子对照检查材料
2014/09/24 职场文书
离婚财产分隔协议书
2014/10/23 职场文书
2016年圣诞节活动总结范文
2016/04/01 职场文书
开学第一周日记(三篇范文)
2019/08/23 职场文书
升级 Win11 还是坚守 Win10?微软 Win11 新系统缺失功能大盘点
2022/04/05 数码科技
JDK8中String的intern()方法实例详细解读
2022/09/23 Java/Android