基于api状态vue js数组更新答案

【问题标题】：based on api status vue js array updated基于api状态vue js数组更新
【发布时间】：2020-08-20 08:11:20
【问题描述】：

我是 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);

                  }
              });

【问题讨论】：

标签： javascript arrays vue.js nuxt.js

【解决方案1】：

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

【讨论】：

【解决方案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);
}

【讨论】：