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

Question

我在我的 VueJS 2 应用程序中使用 Vuex 进行状态管理。在我有问题的组件的 mounted 属性中，我发送了一个 Action ...

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。检查 state.locations 中的位置并仅在该位置不存在时才调用 API 是否是个好主意？或者更好的是，检查位置数据的“陈旧性”并仅在经过一段时间后调用 API 来刷新数据？

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

Answer 1

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