$store.dispatch用于觸發一個action。
action是一個包含type和payload屬性的對象,type描述了要執行的操作,payload包含了傳給操作的數據。
在使用$store.dispatch時,可以傳入一個action的對象作為參數,也可以傳入action對象的type和payload作為參數。
this.$store.dispatch('increment', 10);
// 等價于
this.$store.dispatch({ type: 'increment', payload: 10 });
action的執行可以產生副作用,例如改變state或者觸發另一個action等。使用$store.dispatch所觸發的action,會被提交到store的actions對象中尋找對應的方法進行處理。一個action的處理可能包括多步操作,例如先發送一個網絡請求,等待服務器響應后再修改state等,在action中可以使用Promise進行異步處理。
actions: {
async fetchData({ commit }) {
const response = await fetch('/api/data');
const data = await response.json();
commit('setData', data);
}
}
在組件中,可以使用$store.dispatch來觸發一個action,也可以使用mapActions將action映射為組件的方法。
import { mapActions } from 'vuex';
export default {
methods: {
...mapActions(['increment', 'fetchData']),
async loadData() {
await this.fetchData();
console.log(this.data); // 獲取state中的數據
}
},
computed: {
...mapState(['data'])
}
}