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 相关文章推荐
求数组最大最小值方法适用于任何数组
Aug 16 Javascript
javascript模块化是什么及其优缺点介绍
Sep 02 Javascript
使用Chrome调试JavaScript的断点设置和调试技巧
Dec 16 Javascript
JS实现超过长度限制后自动跳转下一款文本框的方法
Feb 23 Javascript
详细介绍jQuery.outerWidth() 函数具体用法
Jul 20 Javascript
JavaScript提高性能知识点汇总
Jan 15 Javascript
JS Select下拉框(支持输入模糊查询)
Feb 04 Javascript
Javascript中的async awai的用法
May 17 Javascript
关于JS与jQuery中的文档加载问题
Aug 22 jQuery
webpack的CSS加载器的使用
Sep 11 Javascript
vue项目动态设置页面title及是否缓存页面的问题
Nov 08 Javascript
微信小程序实现锚点功能
Nov 20 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
转生史莱姆:萌王第一次撸串开心到飞起,哥布塔撸串却神似界王神
2018/11/30 日漫
php 全局变量范围分析
2009/08/07 PHP
php中Socket创建与监听实现方法
2015/01/05 PHP
php+ajax无刷新分页实例详解
2015/12/07 PHP
Zend Framework教程之Bootstrap类用法概述
2016/03/14 PHP
php curl上传、下载、https登陆实现代码
2017/07/23 PHP
详细解读php的命名空间(二)
2018/02/21 PHP
DOM相关内容速查手册
2007/02/07 Javascript
jquery操作对象数组元素方法详解
2014/11/26 Javascript
javascript数组随机排序实例分析
2015/07/22 Javascript
JS防止网页被嵌入iframe框架的方法分析
2016/09/13 Javascript
vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)
2017/03/30 Javascript
关于TypeScript中import JSON的正确姿势详解
2017/07/25 Javascript
使用canvas进行图像编辑的实例
2017/08/29 Javascript
SelectPage v2.4 发布新增纯下拉列表和关闭分页功能
2017/09/07 Javascript
vue-lazyload图片延迟加载插件的实例讲解
2018/02/09 Javascript
微信小程序文字显示换行问题
2019/07/28 Javascript
Element Backtop回到顶部的具体使用
2020/07/27 Javascript
详解Java中String JSONObject JSONArray List转换
2020/11/13 Javascript
Python实现的多线程端口扫描工具分享
2015/01/21 Python
自动化Nginx服务器的反向代理的配置方法
2015/06/28 Python
浅析Python中的for 循环
2016/06/09 Python
Python3.6正式版新特性预览
2016/12/15 Python
Python实现计算两个时间之间相差天数的方法
2017/05/10 Python
Python数据分析中Groupby用法之通过字典或Series进行分组的实例
2017/12/08 Python
python批量修改文件编码格式的方法
2018/05/31 Python
python 从文件夹抽取图片另存的方法
2018/12/04 Python
用python写PDF转换器的实现
2020/10/29 Python
BeautifulSoup获取指定class样式的div的实现
2020/12/07 Python
css3制作动态进度条以及附加jQuery百分比数字显示
2012/12/13 HTML / CSS
绿色美容,有机护肤品和化妆品:Safe & Chic
2018/10/29 全球购物
美国工业用品采购网站:Zoro.com
2020/10/27 全球购物
个人简历自我评价范文
2014/02/04 职场文书
行政内勤岗位职责
2014/04/07 职场文书
婚宴新娘致辞
2015/07/28 职场文书
人生哲理妙语30条:淡写流年,笑过人生
2019/09/04 职场文书