Vuex 저장소의 데이터가 "stale"이거나 존재하지 않는 경우에만 API 호출

Vuex 저장소의 데이터가 "stale"이거나 존재하지 않는 경우에만 API 호출

나는 내 VueJS 2 애플리케이션에서 국가 관리를 위해 Vuex를 사용하고 있다.에서mounted문제의 내 부대의 소유물. 나는 조치를 취한다...

mounted: function () {
  this.$store.dispatch({
    type: 'LOAD_LOCATION',
    id: this.$route.params.id
  });
}

...그리고 이 동작은 API 호출을 하고 그 위치의 세부 정보를 얻기 위해 공리를 사용한다.

LOAD_LOCATION: function ({ commit }, { id }) {
  axios.get(`/api/locations/${id}`).then((response) => {
    commit('SET_LOCATION', { location: response.data })
  }, err => {
    console.log(err);
  });
}

돌연변이는 다음과 같이 보인다.

SET_LOCATION: (state, { location }) => {
  state.locations.push(location);
}

이 위치를 처음 탐색할 때 이치에 맞는다.그러나 사용자가 다음 항목으로 이동한다고 가정해 봅시다./locations/5그런 다음 앱의 다른 곳을 탐색하고/locations/5몇 분 후에위치 확인을 하는 것이 좋을까?state.locations그리고 이 위치가 없는 경우에만 API 호출을 할 수 있는가?아니면 위치 데이터의 "결정성"을 확인하고 일정 기간이 지난 후에 데이터를 새로 고치기 위한 API 호출만 하는 것이 더 좋은가?

편집: 이러한 경우에 일반적으로 Vuex에서 따르는 패턴이 있는가?흔한 경우인 것 같지만, 액션에서 존재감/정확성을 확인하기 위한 논리를 방해하는 것이 확실한 접근법인지는 잘 모르겠다.

개인적으로, 나는 데이터가 존재하는지 확인하고 데이터가 수신될 때 타임스탬프를 설정한 다음, 후속 호출에서 데이터가 종료/오래된지 여부를 판단하고 그에 따라 행동하는 것이 훌륭한 아이디어라고 생각한다.이렇게 하면 재방문 속도가 빨라지고 모바일 사용자의 데이터도 다소 절약될 수 있다.

참조URL: https://stackoverflow.com/questions/44168178/only-make-api-call-when-data-in-vuex-store-is-stale-or-not-present