这篇文章主要介绍“Vuex状态管理之Action异步操作实例分析”,在日常操作中,相信很多人在Vuex状态管理之Action异步操作实例分析问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Vuex状态管理之Action异步操作实例分析”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
成都创新互联公司专业为企业提供安乡网站建设、安乡做网站、安乡网站设计、安乡网站制作等企业网站建设、网页设计与制作、安乡企业网站模板建站服务,10年安乡做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。
一、 基本知识
1、不要再Mutation中进行异步操作.
但是某些情况, 我们确实希望在Vuex中进行一些异步操作, 比如网络请求, 必然是异步的. 这个时候怎么处理呢?
Action类似于Mutation, 但是是用来代替Mutation进行异步操作的.
Action的基本使用代码如下:
context是什么?
(1)context是和store对象具有相同方法和属性的对象.
(2)也就是说, 我们可以通过context去进行commit相关的操作, 也可以获取context.state等.
2、action的方法调用
在Vue组件中, 如果我们调用action中的方法, 那么就需要使用dispatch
同样的, 也是支持传递payload
3、Action与Promise
在Action中, 我们可以将异步操作放在一个Promise中, 并且在成功或者失败后, 调用对应的resolve或reject
二、 效果
页面中调用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
----------action: info对象的内容是否是响应式----------
{{$store.state.info}}
到此,关于“Vuex状态管理之Action异步操作实例分析”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!