vuex的actions异步请求操作

最新推荐文章于 2023-10-12 00:28:50 发布

qq_39591546

最新推荐文章于 2023-10-12 00:28:50 发布

阅读量1.6k

点赞数

分类专栏：前端 vue 文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/qq_39591546/article/details/121699433

版权

前端同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

vue

4 篇文章 0 订阅

订阅专栏

本文介绍了如何使用Vuex的actions进行异步操作，并通过mutations更新state。示例展示了actions中定义异步函数，通过commit触发mutations更新数据，以及在页面组件中如何调用actions并获取异步操作后的state值。这为Vue应用的状态管理提供了一种有效的方法。

摘要由CSDN通过智能技术生成

通过actions来实现异步操作，actions通过mutations去实现state赋值

1. 通过actions来实现异步操作，actions通过mutations去实现state赋值

mutations: {
  getData(state,payload){
      state.num = payload
    }
}
 actions: {
	  asyncData({commit}){
      let num;
      return new Promise((resolve,reject)=>{
        setTimeout(()=>{
          num = 10
          commit('getData',num)
          resolve()
        },3000)
      })
    }
  },

2. 页面使用
（1）mapActions是vuex方法引用的一种快捷方式

import {mapActions} from 'vuex'
methods:{
	...mapActions(['asyncData']),
	getData(){
		this.asyncData().then(()=>{
			console.log(this.$store.state.num);
		})
	}
},
created() {
	this.getData();
},