vue 状态管理 四、Action用法

系列导航

vue 状态管理 一、状态管理概念和基本结构

vue 状态管理 二、状态管理的基本使用

vue 状态管理 三、Mutations和Getters用法

vue 状态管理 四、Action用法

vue 状态管理 五、Module用法

action用法

一、 基本知识

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

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

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

Action的基本使用代码如下:

 vue 状态管理 四、Action用法

 

 

context是什么?

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

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

2、action的方法调用

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

 vue 状态管理 四、Action用法

 

 

同样的, 也是支持传递payload

 vue 状态管理 四、Action用法

 

 

3、Action与Promise

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

 vue 状态管理 四、Action用法

 

 vue 状态管理 四、Action用法

 

 

 

二、 效果

页面中调用action中的方法

 vue 状态管理 四、Action用法

 

 vue 状态管理 四、Action用法

 

 

 

三、目录结构

 vue 状态管理 四、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

<template>
	<div >
		<h2>----------action: info对象的内容是否是响应式----------</h2>
		<h2>{{$store.state.info}}</h2>
		<button @click="updateInfo">修改信息</button>
	</div>
</template>

<script>
	import { 	computed } from 'vue'
	import { 	useStore } from 'vuex'
	export default {
		components: {
		}, 
		methods: {
			updateInfo() {
			  this.$store.dispatch('aUpdateInfo', '我是携带的信息')
			    .then(res => {
			      console.log('里面完成了提交');
			      console.log(res);
			    })
			},
			 
		},
		setup() {
			return {
				 
			}
		}
	}
</script>

 

上一篇:Hexo+Github博客:新建菜单,并在该菜单内添加单篇/多篇文章


下一篇:PHP项目以连接到硬件