vue.js - 从同一个 Action 中调用两个突变

Question

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

store 上有两个 Action :

• getCartContent ，它在页面加载时被调用(从后端获取初始内容，后端又从 session 中检索数据)
• 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紧随其后的突变，以便它从后端获取新的项目列表。

我尝试从同一个 Action 中提交第二个突变，如下所示:

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

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

我还尝试发送 getCartContent在发送 addToCart 之后立即在组件内部执行操作行动，但这是同样的问题。

我该如何解决这个问题？

Answer 1

您的 axios 调用是异步的，这意味着当您的 getCartContent 突变触发时，您的 addToCart 突变可能不一定完成。因此，有时 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 请求，你可以去掉 addToCart 突变和 dispatch getCartContent POST 请求完成后的操作:

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