基于api状态更新vuejs数组

Question

我是vue js的新手。我想调用api。它运行得很好。但我想提出一个条件，如果api响应是这个，那么vuejs数组就会更新。这是我的密码。但它给了我错误"；不要在突变处理程序之外对vuex存储状态进行突变"如何处理？

axios.post(baseUrl+'/api/v1/addProductWishlist',pitem,
{headers: {
'Authorization': 'Bearer ' + x,
'Content-Type':'application/json'
}
}).then(r => {
if(r.data.status == 202)
{

}
else{
state.cartItems.push(payload);
}
});

Answer 1

使用Mutation修改状态，不重定向更改状态实例

有关更多详细信息：https://vuex.vuejs.org/guide/mutations.html

Answer 2

请注意，您没有遵循使用Vuex的正确模式。您应该仅从突变中更新状态。它是Vuex(以及其他框架(中状态管理的重要组成部分。不遵循这个概念可能会破坏Vuex保持的反应性，并使一个大型应用程序变得极不可预测，因为你无法跟踪应用程序的哪个部分改变了你状态中的值。

一个好的做法是将突变、操作和api调用分离到3个不同的文件。该操作可能是您的功能管理器-创建一个调用api文件函数(仅执行axios api调用(的操作，并在从突变文件中返回调用突变的响应后相应地更新状态。

// actions.js
{
myAction: async ({ commit }) => {
const response = await myApiCall();
if (response.data.status == 202) { ... }
else {
commit('ADD_CART_ITEM', response.item)
}
}
}
// api.js
export function myApiCall() {
return axios.post(...)
}
// mutations.js
{
ADD_CART_ITEM: (state, payload) => state.cartItems.push(payload);
}