返回
在 Vuex 存储中从一个突变优雅地调用另一个突变
vue.js
2024-03-09 22:07:49
在 Vuex 存储中从一个突变调用另一个突变的艺术
引言
在 Vuex 存储中管理状态是一个至关重要的任务，而确保突变之间的协调至关重要。为了避免直接调用突变的陷阱，操作提供了灵活而强大的解决方案。本文将深入探讨在 Vuex 存储中使用操作从一个突变调用另一个突变的最佳实践。
问题：直接调用突变的限制
Vuex 突变是纯函数，这意味着它们不能执行异步操作或修改状态。因此，从一个突变直接调用另一个突变是不可能的。这可能会导致不可预测的行为和状态管理困难。
解决方案：使用操作
操作是用于解决此问题的关键概念。操作可以执行异步操作，并且可以在完成时提交多个突变。这允许您以结构化且可维护的方式组合状态更新。
修改后的 Vuex 存储
以下是一个修改后的 Vuex 存储示例，它使用操作来从 SET_PRODUCTS 突变调用 SET_CATEGORIES 突变：
import spreeApi from '../../gateways/spree-api'
// state
const state = {
products: [],
categories: []
}
// mutations
const mutations = {
SET_PRODUCTS: (state, response) => {
state.products = response.data.products
},
SET_CATEGORIES: (state) => {
state.categories = state.products.map(function(product) { return product.category})
}
}
// actions
const actions = {
FETCH_PRODUCTS: (context, filters) => {
return spreeApi.get('products').then(response => context.commit('SET_PRODUCTS', response))
},
SET_CATEGORIES: (context) => {
context.commit('SET_CATEGORIES')
}
}
操作的好处
使用操作提供了许多好处，包括：
- 异步执行： 操作可以执行异步操作，这对于从 API 提取数据或执行其他耗时的任务非常有用。
- 组合突变： 操作可以将多个突变组合成单个操作，这简化了代码并提高了维护性。
- 松散耦合： 操作松散耦合了组件和突变，从而提高了可测试性和代码重用性。
从一个突变调用另一个突变的步骤
要从一个突变调用另一个突变，请按照以下步骤操作：
- 在操作中使用
context.commit提交第一个突变。 - 在第二个突变中使用
context.commit提交第二个突变。
结论
在 Vuex 存储中使用操作为从一个突变调用另一个突变提供了一个优雅而有效的解决方案。通过利用操作的异步能力和组合突变的功能，您可以创建结构良好且易于维护的状态管理代码。
常见问题解答
1. 为什么不能直接从一个突变调用另一个突变？
突变是纯函数，因此无法修改状态或执行异步操作。
2. 操作和突变之间有什么区别？
操作可以执行异步操作并组合突变，而突变是纯函数，用于直接修改状态。
3. 什么时候应该使用操作？
当您需要执行异步操作或组合多个突变时，应使用操作。
4. 如何在操作中提交突变？
可以使用 context.commit 在操作中提交突变。
5. 为什么使用操作可以提高可测试性？
操作将组件和突变松散耦合，这使得测试操作和突变更加容易。
