僅當Vuex存儲中的數據“過時”或不存在時才進行API調用

Question

我在VueJS 2應用程序中使用Vuex進行狀態管理。 在我的組件的mounted屬性中，我發送一個動作......

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

...此操作使用axios進行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並在幾分鍾后返回/locations/5 。 檢查state.locations的位置是否是一個好主意，如果此位置不存在，則僅進行API調用？ 或者更好的是，檢查位置數據的“陳舊性”，並且只在一段時間過后才進行API調用以刷新數據？

編輯：對於使用Vuex的這些案例，通常會遵循一種模式嗎？ 這似乎是一種常見的情況，但我不確定是否干擾邏輯以檢查動作中的存在/陳舊是一種可靠的方法。

Answer 1

就個人而言，我認為在行動中進行檢查以查看數據是否存在並在收到數據時設置時間戳是一個很好的主意，然后在后續調用中它可以確定數據是否退出/是否陳舊並相應地采取行動。 這樣可以加快重復訪問速度，同時也可以節省移動用戶的數據。