Vuex状态管理之Action异步操作实例分析

这篇文章主要介绍“Vuex状态管理之Action异步操作实例分析”,在日常操作中,相信很多人在Vuex状态管理之Action异步操作实例分析问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Vuex状态管理之Action异步操作实例分析”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

成都创新互联公司专业为企业提供安乡网站建设、安乡做网站、安乡网站设计、安乡网站制作等企业网站建设、网页设计与制作、安乡企业网站模板建站服务,10年安乡做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。

action用法

一、 基本知识

1、不要再Mutation中进行异步操作.

但是某些情况, 我们确实希望在Vuex中进行一些异步操作, 比如网络请求, 必然是异步的. 这个时候怎么处理呢?

Action类似于Mutation, 但是是用来代替Mutation进行异步操作的.

Action的基本使用代码如下:

Vuex状态管理之Action异步操作实例分析

context是什么?

(1)context是和store对象具有相同方法和属性的对象.

(2)也就是说, 我们可以通过context去进行commit相关的操作, 也可以获取context.state等.

2、action的方法调用

在Vue组件中, 如果我们调用action中的方法, 那么就需要使用dispatch

Vuex状态管理之Action异步操作实例分析

同样的, 也是支持传递payload

Vuex状态管理之Action异步操作实例分析

3、Action与Promise

在Action中, 我们可以将异步操作放在一个Promise中, 并且在成功或者失败后, 调用对应的resolve或reject

Vuex状态管理之Action异步操作实例分析

Vuex状态管理之Action异步操作实例分析

二、 效果

页面中调用action中的方法

Vuex状态管理之Action异步操作实例分析

Vuex状态管理之Action异步操作实例分析

三、目录结构

Vuex状态管理之Action异步操作实例分析

四、源码

index.js

import { createStore} from 'vuex'


export default createStore({
	state: {
		counter: 0,
		info: {
		  name: 'kobe',
		  age: 40,
		  height: 1.98
		}
	},
	mutations: {
		updateInfo(state) {
		  state.info.name = 'coderwhy'
		}
	},
	actions: {
		aUpdateInfo(context, payload) {
		  return new Promise((resolve, reject) => {
		    setTimeout(() => {
		      context.commit('updateInfo');
		      console.log(payload);
		
		      resolve('1111111')
		    }, 1000)
		  })
		}
	},
	getters: { },
	modules: {}
})

App.vue


 

到此,关于“Vuex状态管理之Action异步操作实例分析”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!


网站栏目:Vuex状态管理之Action异步操作实例分析
文章位置:http://pwwzsj.com/article/jdepoo.html