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 相关文章推荐
重定向实现代码
Nov 20 Javascript
把textarea中字符串里含有的回车换行替换成&amp;lt;br&amp;gt;的javascript代码
Apr 20 Javascript
javascript 基础篇2 数据类型,语句,函数
Mar 14 Javascript
JS打开图片另存为对话框实现代码
Dec 26 Javascript
JavaScript常用脚本汇总(一)
Mar 04 Javascript
浅谈String.valueOf()方法的使用
Jun 06 Javascript
利用VS Code开发你的第一个AngularJS 2应用程序
Dec 15 Javascript
三分钟学会用ES7中的Async/Await进行异步编程
Jun 14 Javascript
在Vue组件中获取全局的点击事件方法
Sep 06 Javascript
layer.prompt使文本框为空的情况下也能点击确定的方法
Sep 24 Javascript
JS中==、===你分清楚了吗
Mar 04 Javascript
Vue中函数防抖节流的理解及应用实现
Apr 24 Javascript
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
php单件模式结合命令链模式使用说明
2008/09/07 PHP
PHP编程入门的基本语法知识点总结
2016/01/26 PHP
php静态成员方法和静态的成员属性的使用方法
2017/10/26 PHP
UserData用法总结 lanyu出品
2010/07/01 Javascript
web前端开发也需要日志
2010/12/09 Javascript
TimergliderJS 一个基于jQuery的时间轴插件
2011/12/07 Javascript
基于jquery的放大镜效果
2012/05/30 Javascript
javascript中的nextSibling使用陷(da)阱(keng)
2014/05/05 Javascript
JavaScript中标识符提升问题
2015/06/11 Javascript
图解Sublime Text3使用技巧
2015/12/21 Javascript
浅谈jquery上下滑动的注意事项
2016/10/13 Javascript
用jQuery实现可输入多选下拉组合框实例代码
2017/01/18 Javascript
js前端日历控件(悬浮、拖拽、自由变形)
2017/03/02 Javascript
BootStrap 动态表单效果
2017/06/02 Javascript
vue2.0 实现富文本编辑器功能
2019/05/26 Javascript
在layer弹层layer.prompt中,修改placeholder的实现方法
2019/09/27 Javascript
[59:07]海涛为你详解DOTA2新版本“贤哲秘契”
2014/11/22 DOTA
爬山算法简介和Python实现实例
2014/04/26 Python
利用Psyco提升Python运行速度
2014/12/24 Python
浅析Python中的join()方法的使用
2015/05/19 Python
python批量下载网站马拉松照片的完整步骤
2018/12/05 Python
Python Pandas数据结构简单介绍
2019/07/03 Python
Python时间序列缺失值的处理方法(日期缺失填充)
2019/08/11 Python
图解python全局变量与局部变量相关知识
2019/11/02 Python
如何修复使用 Python ORM 工具 SQLAlchemy 时的常见陷阱
2019/11/19 Python
python实现从ftp服务器下载文件
2020/03/03 Python
django的autoreload机制实现
2020/06/03 Python
深入了解python列表(LIST)
2020/06/08 Python
AmazeUI 平滑滚动效果的示例代码
2020/08/20 HTML / CSS
英国IT硬件供应商,定制游戏PC:Mesh Computers
2019/03/28 全球购物
哥德堡通行证:Gothenburg Pass
2019/12/09 全球购物
违反工作纪律检讨书
2014/02/15 职场文书
企业领导班子四风对照检查材料
2014/09/27 职场文书
4S店收银员岗位职责
2015/04/07 职场文书
创业计划书之书店
2019/09/10 职场文书
日元符号 ¥
2022/02/17 杂记