系列導航

vue 狀態管理 一、狀態管理概念和基本結構

vue 狀態管理 二、狀態管理的基本使用

vue 狀態管理 三、Mutations和Getters用法

vue 狀態管理 四、Action用法

vue 狀態管理 五、Module用法

action用法

一、 基本知識

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

<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>