Vuex Actions: 异步操作

引言

在 Vuex 中，actions 类似于 mutations，不同在于：mutations 必须是同步函数，而 actions 可以包含任意异步操作。actions 接收一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 访问 state 和 getters。

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》、《前端求职突破计划》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

定义 Actions

Actions 在 Vuex store 中定义，通常是在 actions 对象中返回一个函数。

示例代码

// store.js
import { createStore } from 'vuex';

const store = createStore({
// ...
actions: {
// 定义一个 action，用于异步增加 count 的值
incrementAsync(context) {
	setTimeout(() => {
		context.commit('increment');
	}, 1000);
},
// 定义一个 action，接收额外的参数
setCountAsync(context, newCount) {
	setTimeout(() => {
		context.commit('setCount', newCount);
	}, 1000);
	}
	}
// ...
});

export default store;

分发 Actions

在 Vue 组件中，可以通过 this.$store.dispatch 方法来分发一个 action。

示例代码

// 在组件中
methods: {
incrementCountAsync() {
	this.$store.dispatch('incrementAsync');
},
setCountAsync(newCount) {
	this.$store.dispatch('setCountAsync', newCount);
}
}

使用命名空间

当你的应用变得复杂时，store 可能会包含多个模块。为了更好地组织代码，可以为模块启用命名空间，这样 action 类型就会根据模块注册的路径来命名。

示例代码

// store/modules/counter.js
export default {
	namespaced: true,
// ...
actions: {
	incrementAsync({ commit }) {
// ...
}
}
// ...

// 在组件中
methods: {
	incrementCountAsync() {
		this.$store.dispatch('counter/incrementAsync');
	}
}

结论

Vuex 的 actions 提供了一种处理异步操作的方式，并且可以在异步操作完成后提交 mutations 来更改状态。通过使用 actions，可以将异步逻辑与状态更改逻辑分离，使得代码更加清晰和模块化。

在实际应用中，通常会将复杂的异步操作放在 actions 中处理，而将同步的状态更改放在 mutations 中。这样的模式有助于保持状态管理的可预测性和可维护性。