Vuex: 이미 가져온 데이터를 기반으로 엑시스를 사용하여 데이터 가져오기

Vuex: 이미 가져온 데이터를 기반으로 엑시스를 사용하여 데이터 가져오기

Vuex 스토어의 Axios를 통해 외부 API에서 데이터를 가져오고 있습니다.이것에 의해, 오브젝트를 포함한 배열을 얻을 수 있습니다.예를 들어,cities.

각각city가 있다zipCode도시 세부 정보를 가져와야 해요이 상세 오브젝트를 새로운 키로 추가하고 싶다.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
2. 에fetchCities액션: 커밋UPDATE_CITIES
3. 에UPDATE_CITIES변환: .map을 payload에 저장하고 새 개체를 만듭니다.-> 모두 푸시합니다.state.cities
4. 에fetchCities액션: 루프state.cities디스패치fetchCityDetails(zipCode)각 도시마다
5. 에fetchCityDetails액션: 커밋UPDATE_CITY_DETAILS
6. 에UPDATE_CITY_DETAILS변환: .map onstate.cities추가하다cityDetails참조된 도시 객체에 대한 이의

새로운 액션

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;
}

의문은 남습니다.이런 종류의 페칭에 대해 더 나은/더 최적화된 접근방식이 있습니까?

이 문제에 대처하는 방법에는 훨씬 더 훌륭하고 우아한 방법이 있다고 생각합니다.단순히 버그를 해결하는 것(도시 배열이 될 것으로 예상되는 빈 어레이 위를 루프합니다)

고치다

커밋 기능 후 다음 행에서 디스패치 기능을 이동해 보겠습니다.그array(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': {...}
    }
}

오자와 서식이 틀려서 죄송합니다.전화기에 코드를 입력하는 것은 끔찍하다.

언급URL : https://stackoverflow.com/questions/53037066/vuex-fetch-data-with-axios-based-on-already-fetched-data