系列導航
vue 狀態管理 三、Mutations和Getters用法
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>
推薦一個適合零基礎學習SQL的網站： 不用安裝數據庫，在線輕松學習SQL！