Vuex：根据已获取的数据使用axios获取数据

Question

我正在通过Vuex商店中的axios从外部API获取数据，它为我提供了一个包含对象的数组——比方说——cities。

每个城市都有一个zipCode，我需要用它获取城市详细信息。我想将这个details对象作为一个新键添加到cities数组中。

现在我正在获取所有城市，并使用另一个Vuex操作获取城市详细信息。

所有城市的行动

fetchCities: ({ commit, state, dispatch }) => {
  let baseUrl = "https://my-url/cities";

  let config = {
    headers: {
      accept: "application/json",
      Authorization: ...
    },
    params: {
      param1: "a",
      param2: "b"
    }
  };

  axios
    .get(baseUrl, config)
    .then(function(response) {
      commit("UPDATE_CITIES_RAW", response.data.items);
    })
    .catch(function(error) {
      console.log(error);
    });
  dispatch("fetchCityDetails");
},

获取所有城市后的变异

UPDATE_CITIES_RAW: (state, payload) => {
  state.citiesRaw = payload;
},

数组中的每个对象都有一个zipCode，我正在用它获取这个城市的详细信息。

我试图在动作中循环citiesRaw数组，以获取细节并提交每次迭代的更改，但此时状态中的数组为空，因为动作在变异之前被调用。

获取城市详细信息的操作

fetchCityDetails: ({ commit, state }) => {
  let baseUrl = "https://my-url/cities/"

  let config = {
    headers: {
      accept: "application/json",
      Authorization: ...
    }
  };

  // citiesRaw is empty at this point
  state.citiesRaw.forEach(e => {
    let url = baseUrl + e.zipCode;

    axios
      .get(url, config)
      .then(function(response) {
        commit("UPDATE_CITY_DETAILS", {
          response: response.data,
          zipCode: e.zipCode
        });
      })
      .catch(function(error) {
        console.log(error);
      });
  });
},

等待第一次读取然后更新数组的最佳方法是什么？

我应该使用相同的数组还是创建一个新的数组？

或者有没有更好的方法来获取基于Vuex存储中获取的数据？

更新

在异步函数完成之前修复了调度（谢谢@Y-Gherbi），我还重构了获取细节的方法：

1. 组件调度

新行动

fetchCities: ({ commit, state, dispatch }) => {
  let baseUrl = "https://my-url/cities";

  let config = {
    headers: {
      accept: "application/json",
      Authorization: ...
    },
    params: {
      param1: "a",
      param2: "b"
    }
  };

  let url = baseUrl;

  axios
    .get(url, config)
    .then(function(response) {
        commit("UPDATE_CITIES", response.data.items);
        state.cities.forEach(city => {
          dispatch("fetchCityDetails", city.zipCode);
        });
      }
    })
    .catch(function(error) {
      console.log(error);
    });
},
fetchCityDetails: ({ commit }, zipCode) => {
  let baseUrl = "https://my-url/cities";

  let config = {
    headers: {
      accept: "application/json",
      Authorization: ...
    },
  };

  let url = baseUrl + "/" + zipCode;

  axios
    .get(url, config)
    .then(function(response) {
      commit("UPDATE_CITY_DETAILS", {
        cityDetails: response.data,
        zipCode: zipCode
      });
    })
    .catch(function(error) {
      console.log(error);
    });
}

新突变

UPDATE_CITIES: (state, cities) => {
  // I don't need all data & I want to rename the keys from the response,
  // so I create a new object
  cities = cities.map(city => {
    let obj = {};
    obj.zipCode = city.zip_code
    obj.key1 = city.key_1;
    obj.key2 = city.key_2;

    return obj;
  });
  state.cities.push(...cities);
},
UPDATE_CITY_DETAILS: (state, payload) => {
  let cities = state.cities;
  // add one details-object for each city
  cities = cities.map(city => {
    if (city.zipCode == payload.zipCode) {
      city.cityDetails = payload.cityDetails;
    }
    return city;
  });
  state.cities = cities;
}

问题仍然存在：是否有更好/更优化的方法来实现这种获取？

Answer 1

我认为有更好、更优雅的方法来处理这个问题，但只是帮助您解决这个bug（在一个空数组上循环，这个空数组应该是一个城市数组）

修理

尝试在提交函数之后的下一行移动调度函数。数组（citiesRaw）是空的，因为您在调用数据之前调用了操作（因为axios.get是异步的）

替代解决方案

正如您所说，城市显示在一个表中，表中有可扩展的行，用于显示城市详细信息。获取100-1000个城市的数据相当多，但这仍然是对后端的一次调用。但是，从性能和带宽（如果这是大数据使用的正确术语）的角度来看，对所有这些项目进行循环并对每一个项目进行请求可能会有问题。

我个人会在用户实际需要这些数据时处理每个请求。在您的情况下，每当用户单击一行以展开它时。

把它放在商店里？

无论何时，您想在商店中存储城市详细信息都取决于您。您可以将其保存在组件中，但我个人会将其用作某种缓存机制。

当用户单击某行时，检查是否已获取详细信息

if(!state.cityDetails[key]) {
    axios.get().then(res => {
    // Commit a mutation that saves the fetched details
    })
} else {
    // Use the 'cached' cityDetails
}

你的商店可以看起来像这样：

{
    cityDetails: {
        'keyCouldBeIdOrZipcode': {...},
        'anOtherAlreadyFetchedCity': {...}
    }
}

很抱歉输入错误和格式错误。在电话上输入密码很可怕