vuex actions异步修改状态的实例详解


Posted in Javascript onNovember 06, 2019

actions异步修改状态与mutations同步修改状态是两个容易混淆的概念,因为两者在执行上,很难测试出两者的差别,而我们要区别它们两,首先你得区分同步与异步,我的理解是,同步更像是一条流水线作业,而异步则更像是多条,例子你比如打电话,我们通常是我打给我妈,打完之后,再跟我爸打,而异步更像是某聊天工具,你既可以跟你爸聊,又可以跟你妈聊,你跟你妈聊可以在你爸的后面,也可以在他前面,你爸也是

而actions与mutations的区别就在此,mutations是你进行用百度钱包买一件商品时,你必须先把东西购买流程走完你才能再购买另一件商品而actions是你完全可以一样在准备结算时,你可以选择其他商品,结算完其他商品再进行商品的结算,也可以一起结算。

下面我具体介绍actions写法

第一步 在你建立vuex的store.js中声明actions方法

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state={//状态对象
 
count1:1,
 
 
 
},
const mutations={//触发状态
 jia(state,n){
    state.count1+=n;
  },
 jian(state){
    state.count1--;
  },
 
},
const actions={
jiaAction(context){
 
context.commit('jia',10)
/*这句话就是说,我现在store调用了同步的方法jia()*/
 
},
jianAction({commit}){
 
 
commit('jian')/*这句话就是说,我现在store调用了同步的方法jian()*/
}
 
 
}
 
 
export default new Vuex.Store({
 
 
 
state,
mutations,
getters,
actions/*这与state,mutations的操作方法是相同*/
})

第二步 在你的模板(比如a.vue)里引入你需要actions方法

1)import引入mapActions

import {mapState,mapMutations,mapGetters,mapActions} from 'vuex'

2)在你的方法中引入 ...mapActions(['jiaAction','jianAction'])

格式一般都是固定照抄即可

代码如下:

<template>
<div>
 
<div>
 
{{count1}}
 
</div>
 
</div>
</template>
<script>
  import store from '@/store'
  import {mapState,mapMutations,mapGetters,mapActions} from 'vuex'
  export default{
    data(){
      return{
       
      }
    },
  
 methods:{
  ...mapMutations([ 
    'jia','jian'
  ]),
  ...mapActions(['jiaAction','jianAction'])
}, 
 
   computed:{
   
   
   ...mapState(["count1"]),
 
 
   },
    
    store
    
  }
</script>
 
 
 
 
 
<style scoped>
.color{
color:red;
}
 
</style>

第三步在你的组件的模板(a.vue)里引入点击事件

代码如下:

<template>
<div>
 
<div>
 
{{count1}}
 
 
</div>
<p>
 <button @click="jiaAction">+</button>
 <button @click="jianAction">-</button>
</p>
</div>
</template>

整体代码如下:

<template>
<div>
 
<div>
 
{{count1}}
 
</div>
<p>
 <button @click="jiaAction">+</button>
 <button @click="jianAction">-</button>
</p>
</div>
</template>
<script>
  import store from '@/store'
  import {mapState,mapMutations,mapGetters,mapActions} from 'vuex'
  export default{
    data(){
      return{
       
      }
    },
  
 methods:{
  ...mapMutations([ 
    'jia','jian'
  ]),
  ...mapActions(['jiaAction','jianAction'])
}, 
 
   computed:{
   
   
   ...mapState(["count1"]),
 
 
   },
    
    store
    
  }
</script>

注:现在你点击你的+或-的按钮,观察它的值与你把

<button @click="jiaAction">+</button>
 <button @click="jianAction">-</button>

换成

<button @click="jia">+</button>
 <button @click="jian">-</button>

有何不同?

没有区别说明你调试代码成功

第四步 进行异步验证

我们在我们的store.js中的jiaAction加入jiaAction方法

setTimeout(()=>{
context.commit('jian')
},3000)
console.log('我先被执行');

你再观察结果,你会发现jian这个方法在3s之后执行,你点jia依然可以在3s之内先执行,这就是异步修改状态与同步的区别。

整体代码如下:

a.vue部分

<template>
<div>
 
<div>
 
{{count1}}
 
 
</div>
<p>
 <button @click="jiaAction">+</button>
 <button @click="jianAction">-</button>
</p>
</div>
</template>

整体代码如下:

<template>
<div>
 
<div>
 
{{count1}}
 
</div>
<p>
 <button @click="jiaAction">+</button>
 <button @click="jianAction">-</button>
</p>
</div>
</template>
<script>
  import store from '@/store'
  import {mapState,mapMutations,mapGetters,mapActions} from 'vuex'
  export default{
    data(){
      return{
       
      }
    },
  
 methods:{
  ...mapMutations([ 
    'jia','jian'
  ]),
  ...mapActions(['jiaAction','jianAction'])
}, 
 
   computed:{
   
   
   ...mapState(["count1"]),
 
 
   },
    
    store
    
  }
</script>

store.js部分

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state={//状态对象

count1:1,



},
const mutations={//触发状态
 jia(state,n){
    state.count1+=n;
  },
jian(state){
    state.count1--;
  },

},
const actions={
jiaAction(context){
setTimeout(()=>{
context.commit('jian')
},3000)
console.log('我先被执行');
context.commit('jia',10)
/*这句话就是说,我现在store调用了同步的方法jia()*/

},
jianAction({commit}){


commit('jian')/*这句话就是说,我现在store调用了同步的方法jian()*/
}


}


export default new Vuex.Store({



state,
mutations,
getters,
actions/*这与state,mutations的操作方法是相同*/
})

以上这篇vuex actions异步修改状态的实例详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript进阶教程(第四课第一部分)
Apr 05 Javascript
Javascript 复制数组实现代码
Nov 26 Javascript
使用jquery为table动态添加行的实现代码
Mar 30 Javascript
检测jQuery.js是否已加载的判断代码
May 20 Javascript
js onload处理html页面加载之后的事件
Oct 30 Javascript
Bootstrap 源代码分析(未完待续)
Aug 17 Javascript
vue 微信授权登录解决方案
Apr 10 Javascript
详解JS取出两个数组中的不同或相同元素
Mar 20 Javascript
详解vue使用$http服务端收不到参数
Apr 19 Javascript
深入学习JavaScript中的bom
May 27 Javascript
JavaScript中BOM对象原理与用法分析
Jul 09 Javascript
jQuery 图片查看器插件 Viewer.js用法简单示例
Apr 04 jQuery
Windows上node.js的多版本管理工具用法实例分析
Nov 06 #Javascript
vue限制输入框只能输入8位整数和2位小数的代码
Nov 06 #Javascript
vuex存值与取值的实例
Nov 06 #Javascript
node省市区三级数据性能测评实例分析
Nov 06 #Javascript
vue计算属性无法监听到数组内部变化的解决方案
Nov 06 #Javascript
详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题
Nov 06 #Javascript
vuex state中的数组变化监听实例
Nov 06 #Javascript
You might like
解析yahoo邮件用phpmailer发送的实例
2013/06/24 PHP
php setcookie(name, value, expires, path, domain, secure) 参数详解
2013/06/28 PHP
PHP实现的交通银行网银在线支付接口ECSHOP插件和使用例子
2014/05/10 PHP
WordPress中编写自定义存储字段的相关PHP函数解析
2015/12/25 PHP
PHP编程入门的基本语法知识点总结
2016/01/26 PHP
php读取和保存base64编码的图片内容
2017/04/22 PHP
javascript Discuz代码中的msn聊天小功能
2008/05/25 Javascript
JavaScript入门教程(3) js面向对象
2009/01/31 Javascript
点击文章内容处弹出页面代码
2009/10/01 Javascript
Javascript 类型转换方法
2010/10/24 Javascript
JS实现距离上次刷新已过多少秒示例
2014/05/23 Javascript
jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)
2016/08/05 Javascript
javascript字体颜色控件的开发 JS实现字体控制
2017/11/27 Javascript
jquery中done和then的区别(详解)
2017/12/19 jQuery
利用adb shell和node.js实现抖音自动抢红包功能(推荐)
2018/02/22 Javascript
jquery.pager.js分页实现详解
2019/07/29 jQuery
python获取标准北京时间的方法
2015/03/24 Python
python基于xmlrpc实现二进制文件传输的方法
2015/06/02 Python
关于python pyqt5安装失败问题的解决方法
2017/08/08 Python
Python发送http请求解析返回json的实例
2018/03/26 Python
pandas groupby 分组取每组的前几行记录方法
2018/04/20 Python
Python将8位的图片转为24位的图片实现方法
2018/10/24 Python
Python操作json的方法实例分析
2018/12/06 Python
python中time库的实例使用方法
2019/10/31 Python
plt.figure()参数使用详解及运行演示
2021/01/08 Python
开发中都用到了那些设计模式?用在什么场合?
2014/08/21 面试题
写一个函数,求一个字符串的长度。在main函数中输入字符串,并输出其长度
2015/11/18 面试题
数据库设计的包括哪两种,请分别进行说明
2016/07/15 面试题
高中同学聚会邀请函
2014/01/11 职场文书
大学四年个人的自我评价
2014/02/26 职场文书
会计与出纳自荐书范文
2014/03/16 职场文书
酒店财务经理岗位职责
2015/04/08 职场文书
2016思想纪律作风整顿心得体会
2016/01/23 职场文书
python实现调用摄像头并拍照发邮箱
2021/04/27 Python
eval(cmd)与eval($cmd)的区别与联系
2021/07/07 PHP
MySQL创建管理HASH分区
2022/04/13 MySQL