Question

我正在使用Vuex商店将所有商品保存在购物车中。

商店有两个动作：

getCartContent，在页面加载时调用（从后端获取初始内容，然后从会话中检索数据）
addToCart，当用户点击添加到购物车按钮时由<Products>组件调度。

这两个都调用相应的突变（具有相同的名称），因为您不应该直接从组件内调用突变。

以下是商店的样子：

const store = new Vuex.Store({
	state: {
		items: [],
	},

	mutations: {
		getCartContent(state, data){
			axios.get('/api/cart').then(response => {
				state.items = response.data;
			});
		},

		addToCart(state, data){
			axios.post('/api/cart/add', {
				item_id: data.item,
			});
		}
	},

	actions: {
		getCartContent(context){
			context.commit('getCartContent');
		},

		addToCart(context, data){
			context.commit('addToCart', {item: data.item});
		}
	}
});

这是按预期工作的，但现在当一个项目被添加到购物车时（从组件内部发送addToCart动作），我希望它能调用getCartContent突变之后，它从后端获取一个新的项目列表。

我尝试从同一个动作中提交第二个突变，如下所示：

actions: {
    // ...
 
	addToCart(context, data){
		context.commit('addToCart', {item: data.item});
		context.commit('getCartContent');
	}
}

但这并不总是有效，有时它会获取项目，但并非总是如此。

我还尝试在发送getCartContent操作后立即从组件内部调度addToCart操作，但这也是同样的问题。

我该如何解决这个问题？

Answer 1

您的axios调用是异步的，这意味着当addToCart突变触发时，您的getCartContent突变可能不一定完成。因此，有时getCartContent不会返回您告诉axios之前立即发送 的帖子请求的项目，这并不奇怪。

您应该将异步调用移到vuex操作：

actions: { getCartContent(context, data) { axios.get('/api/cart').then(response => { state.items = response.data; context.commit('getCartContent', response.data), }); }, addToCart(context, data) { axios.post('/api/cart/add', { item_id: data.item, }).then(() => { context.commit('addToCart', data.item) }) }, }

你的突变除了对模块状态进行简单，直接的更改外什么都不做：

mutations: { getCartContent(state, items) { state.items = items; }, addToCart(state, item) { state.items.push(item); } }

上述说明假设您不是在每个POST请求后发出get('/api/cart')请求，而是通过将数据推送到state.items属性来跟踪项目。

但是，如果您真的想在添加项目后发出GET请求，那么在POST请求完成后，您可以摆脱addToCart变异和dispatch getCartContent操作：

addToCart(context, data) { axios.post('/api/cart/add', { item_id: data.item, }).then(() => { context.dispatch('getCartContent'); }) },

从同一个动作中调用两个突变

1 个答案: