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 相关文章推荐
JavaScript获取页面上某个元素的代码
Mar 13 Javascript
3种不同方式的焦点图轮播特效分享
Oct 30 Javascript
JS实现关键字搜索时的相关下拉字段效果
Aug 05 Javascript
jquery 设置style:display的方法
Jan 29 Javascript
实现无刷新联动例子汇总
May 20 Javascript
javascript框架设计之种子模块
Jun 23 Javascript
jQuery Mobile 触摸事件实例
Jun 04 Javascript
jquery实现(textarea)placeholder自动换行
Dec 22 Javascript
基于JavaScript实现的希尔排序算法分析
Apr 14 Javascript
EasyUI的DataGrid每行数据添加操作按钮的实现代码
Aug 22 Javascript
vue实现简单学生信息管理
May 30 Javascript
微信小程序 根据不同用户切换不同TabBar
Apr 21 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
桌面中心(三)修改数据库
2006/10/09 PHP
PHP解决URL中文GBK乱码问题的两种方法
2014/06/03 PHP
PHP获取链表中倒数第K个节点的方法
2018/01/18 PHP
PHP有序表查找之插值查找算法示例
2018/02/10 PHP
解决FLASH需要点击激活的代码
2006/12/20 Javascript
js实现的真正的iframe高度自适应(兼容IE,FF,Opera)
2010/03/07 Javascript
一步一步制作jquery插件Tabs实现过程
2010/07/06 Javascript
js变换显示图片的实例
2013/04/16 Javascript
jquery序列化表单以及回调函数的使用示例
2014/07/02 Javascript
JavaScript参数个数可变的函数举例说明
2014/10/10 Javascript
jQuery中element选择器用法实例
2014/12/29 Javascript
url中的特殊符号有什么含义(推荐)
2016/06/17 Javascript
精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
2016/07/01 Javascript
js改变透明度实现轮播图的算法
2020/08/24 Javascript
Bootstrap Table使用方法解析
2016/10/19 Javascript
nodejs redis 发布订阅机制封装实现方法及实例代码
2016/12/15 NodeJs
JavaScript数据结构之二叉树的查找算法示例
2017/04/13 Javascript
浅谈Vue.js 1.x 和 2.x 实例的生命周期
2017/07/25 Javascript
axios 处理 302 状态码的解决方法
2018/04/10 Javascript
Vue实现简单分页器
2018/12/29 Javascript
微信小程序判断用户是否需要再次授权获取个人信息
2019/07/18 Javascript
vue-cli3项目配置eslint代码规范的完整步骤
2020/09/10 Javascript
给你选择Python语言实现机器学习算法的三大理由
2017/11/15 Python
python如何将多个PDF进行合并
2019/08/13 Python
探秘TensorFlow 和 NumPy 的 Broadcasting 机制
2020/03/13 Python
pycharm永久激活超详细教程
2020/10/29 Python
CSS3 please 跨浏览器的CSS3产生器
2010/03/14 HTML / CSS
一张图片能隐含千言万语之隐藏你的程序代码
2012/12/13 HTML / CSS
c语言常见笔试题总结
2016/09/05 面试题
金融专业个人求职信
2013/09/22 职场文书
上课说话检讨书大全
2014/01/22 职场文书
幼儿园运动会入场词
2014/02/10 职场文书
保密工作整改情况汇报
2014/11/06 职场文书
在酒桌上的敬酒词
2015/08/12 职场文书
标准版个人借条怎么写?以及什么是借条?
2019/08/28 职场文书
如何基于python实现单目三维重建详解
2022/06/25 Python