如何解决基于api status vue js数组已更新
我是vue js的新手。我想打电话给api。这是完美的工作。但是我想把条件是,如果api响应是这样,那么更新vue js数组。 这是我的代码。但是它给了我错误“不要在变异处理程序之外变异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);
}
});
解决方法
使用Mutation
修改状态,请勿重定向更改状态实例
更多详细信息:https://vuex.vuejs.org/guide/mutations.html
,请注意,您没有遵循正确的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);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。