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 相关文章推荐
输入框的字数时时统计—关于 onpropertychange 和 oninput 使用
Oct 21 Javascript
Javscript调用iframe框架页面中函数的方法
Nov 01 Javascript
JavaScript如何动态创建table表格
Aug 02 Javascript
jqGrid表格应用之新增与删除数据附源码下载
Dec 02 Javascript
利用jQuery实现CheckBox全选/全不选/反选的简单代码
May 31 Javascript
jQuery实现右键菜单、遮罩等效果代码
Sep 27 Javascript
基于JavaScript实现购物车功能
Feb 07 Javascript
Angular.Js中过滤器filter与自定义过滤器filter实例详解
May 08 Javascript
微信小程序仿美团城市选择
Jun 06 Javascript
QQ跳转支付宝并自动领红包脚本(最新)
Jun 22 Javascript
node.js express框架简介与实现
Jul 23 Javascript
基于Element的组件改造的树形选择器(树形下拉框)
Feb 27 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
Home Coffee Roasting
2021/03/03 咖啡文化
中国站长站 For Dede4.0 采集规则
2007/05/27 PHP
PHP微信API接口类
2016/08/22 PHP
php rsa 加密,解密,签名,验签详解
2016/12/06 PHP
降低PHP Redis内存占用
2017/03/23 PHP
基于laravel Request的所有方法详解
2019/09/29 PHP
使用JS读秒使用示例
2013/09/21 Javascript
jQuery.each使用详解
2015/07/07 Javascript
jQuery实现的网页左侧在线客服效果代码
2015/10/23 Javascript
AngularJS自定义插件实现网站用户引导功能示例
2016/11/07 Javascript
使用Xcache缓存器加速PHP网站的配置方法
2017/04/22 Javascript
微信小程序获取循环元素id以及wx.login登录操作
2017/08/17 Javascript
Vue基于NUXT的SSR详解
2017/10/24 Javascript
vue3.0 CLI - 1 - npm 安装与初始化的入门教程
2018/09/14 Javascript
JavaScript计算正方形面积
2019/11/26 Javascript
Python中列表(list)操作方法汇总
2014/08/18 Python
windows下python连接oracle数据库
2017/06/07 Python
利用 python 对目录下的文件进行过滤删除
2017/12/27 Python
基于DataFrame筛选数据与loc的用法详解
2018/05/18 Python
python如何创建TCP服务端和客户端
2018/08/26 Python
Python面向对象基础入门之编码细节与注意事项
2018/12/11 Python
Python实现点阵字体读取与转换的方法
2019/01/29 Python
python Django的web开发实例(入门)
2019/07/31 Python
Python自动生成代码 使用tkinter图形化操作并生成代码框架
2019/09/18 Python
10 套华丽的CSS3 按钮小结
2012/10/03 HTML / CSS
CSS3实现文本垂直排列的方法
2018/07/10 HTML / CSS
丝芙兰香港官网:Sephora香港
2018/03/13 全球购物
FitFlop美国官网:英国符合人体工学的鞋类品牌
2018/10/05 全球购物
Java中的异常处理机制的简单原理和应用
2013/04/27 面试题
在职研究生自我鉴定
2013/10/16 职场文书
学校学习雷锋活动总结
2014/07/03 职场文书
2014年教育工作总结
2014/11/26 职场文书
党员个人党性分析材料
2014/12/18 职场文书
篮球拉拉队口号
2015/12/25 职场文书
公务员爱岗敬业心得体会
2016/01/25 职场文书
《帝国时代4》赛季预告 新增内容编译器可创造地图
2022/04/03 其他游戏