Vuex.Store dispatch
时间: 2024-09-28 13:03:40 浏览: 28
Vuex Store的`dispatch`方法是用来触发(dispatch)一个action的。Action是 Vuex 中的一种特殊类型的异步操作,它包含了数据的改变以及一些副作用(比如调用API)。当你调用`store.dispatch(actionName, [payload])`时,会按照以下流程执行:
1. **创建新的 action context**:Vuex 会在内部创建一个新的 action context,这个 context 包含了当前 store 的 state、mutations 和 getters,以及 dispatch 和 commit 方法。
2. **执行 action creator 函数**:`actionName`是你预先定义好的一个 action 函数名,这个函数通常是异步的,可以返回一个 Promise。如果 action 中有副作用或需要更新状态,那么它们会被放在这个函数里。
3. **调用 commit mutations**:当 action 的 Promise 结束时(无论是成功还是失败),如果 action 内部有对 state 进行修改的地方,会自动调用相应的 mutations 来更新 store 的 state。
4. **返回响应**:`dispatch` 方法会返回 Promise,所以你可以链式调用 `then` 或者 `catch` 来处理 action 的结果。
举个例子:
```javascript
// actions.js
export const fetchData = ({ commit }) => {
return new Promise((resolve, reject) => {
axios.get('api/data')
.then(response => {
commit('SET_DATA', response.data);
resolve();
})
.catch(error => {
reject(error);
});
});
};
// 使用
this.$store.dispatch('fetchData').then(() => {
console.log('数据已加载');
}).catch(error => {
console.error('数据加载失败', error);
});
```
阅读全文