仅当 Vuex 存储中的数据为 "stale" 或不存在时才进行 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，然后导航到应用程序的其他地方，并在几分钟后从 returns 导航到 /locations/5。检查 state.locations 中的位置并仅在该位置不存在时才进行 API 调用是否是个好主意？或者更好的是，检查位置数据的 "staleness" 并仅在经过一段时间后才调用 API 来刷新数据？

编辑：Vuex 在这些情况下是否通常遵循一种模式？这似乎是一个常见的情况，但我不确定在操作中干扰检查 presence/staleness 的逻辑是否是一种可靠的方法。

Answer 1

就我个人而言，我认为在操作中进行检查以查看数据是否存在并在接收到数据时设置时间戳是个好主意，然后在后续调用中它可以确定数据是否存在 exits/is 陈旧并采取相应行动。这样可以加快重复访问的速度，还可以节省一些移动用户的流量。

仅当 Vuex 存储中的数据为 "stale" 或不存在时才进行 API 调用

Only make API call when data in Vuex store is "stale" or not present

javascript

vue.js

vuejs2

vuex