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 相关文章推荐
JQuery Easyui Tree的oncheck事件实现代码
May 28 Javascript
window.requestAnimationFrame是什么意思,怎么用
Jan 13 Javascript
php 中序列化和json使用介绍
Jul 08 Javascript
jquery 跳到顶部和底部动画2句代码简单实现
Jul 18 Javascript
javascript创建createXmlHttpRequest对象示例代码
Feb 10 Javascript
js中的cookie的读写操作示例详解
Apr 17 Javascript
点击按钮出现60秒倒计时的简单js代码(推荐)
Jun 07 Javascript
详解BootStrap中Affix控件的使用及保持布局的美观的方法
Jul 08 Javascript
原生JS实现网络彩票投注效果
Sep 25 Javascript
bootstrap精简教程_动力节点Java学院整理
Jul 14 Javascript
利用JQuery操作iframe父页面、子页面的元素和方法汇总
Sep 10 jQuery
jquery实现简易验证插件封装
Sep 13 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
使用bcompiler对PHP文件进行加密的代码
2010/08/29 PHP
PHP与C#分别格式化文件大小的代码
2011/05/14 PHP
PHP之sprintf函数用法详解
2014/11/12 PHP
PHP调试函数和日志记录函数分享
2015/01/31 PHP
PHP实现创建微信自定义菜单的方法示例
2017/07/14 PHP
laravel实现图片上传预览,及编辑时可更换图片,并实时变化的例子
2019/11/14 PHP
php获取是星期几的的一些常用姿势
2019/12/15 PHP
ThinkPHP5框架中使用JWT的方法示例
2020/06/03 PHP
取选中的radio的值
2010/01/11 Javascript
js 关于=+与+=日期函数使用说明(赋值运算符)
2011/11/15 Javascript
javascript跨域的4种方法和原理详解
2014/04/08 Javascript
jQuery实现的Div窗口震动特效
2014/06/09 Javascript
JavaScript 作用域链解析
2014/11/13 Javascript
JavaScript实现给按钮加上双重动作的方法
2015/08/14 Javascript
详解Javascript模板引擎mustache.js
2016/01/20 Javascript
Bootstrap滚动监听(Scrollspy)插件详解
2016/04/26 Javascript
js中创建对象的几种方式
2017/02/05 Javascript
在百度搜索结果中去除掉一些网站的资料(通过js控制不让显示)
2017/05/02 Javascript
浅谈layui里的上传控件问题
2019/09/26 Javascript
vue+vant-UI框架实现购物车的复选框全选和反选功能
2019/11/05 Javascript
js实现拖拽与碰撞检测
2020/09/18 Javascript
详解用TensorFlow实现逻辑回归算法
2018/05/02 Python
Python线程同步的实现代码
2018/10/03 Python
Python日期时间Time模块实例详解
2019/04/15 Python
Python之time模块的时间戳,时间字符串格式化与转换方法(13位时间戳)
2019/08/12 Python
Python测试Kafka集群(pykafka)实例
2019/12/23 Python
python 实现一个简单的线性回归案例
2020/12/17 Python
HTML5开发动态音频图的实现
2020/07/02 HTML / CSS
养生餐厅创业计划书范文
2014/03/26 职场文书
班级标语大全
2014/06/21 职场文书
2014年党的群众路线学习心得体会
2014/11/05 职场文书
幼儿园中班个人总结
2015/02/28 职场文书
党务工作者主要事迹材料
2015/11/03 职场文书
java中重写父类方法加不加@Override详解
2021/06/21 Java/Android
K8s部署发布Golang应用程序的实现方法
2021/07/16 Golang
MySQL中的全表扫描和索引树扫描
2022/05/15 MySQL