Javascript 仅在Vuex存储区中的数据为“时进行API调用”；陈腐的；还是不在场

我在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

并仅在该位置不存在时进行API调用是否是一个好主意？或者更好的方法是检查位置数据的“过时性”，并且只在经过一定时间后进行API调用以刷新数据

---

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

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

是的，很明显，对于您的编辑，我还没有在互联网上看到此用例的任何常见模式。不过，我知道很多React用户都在使用React query/swr，它提供了很多很好的功能（请参见中的选项4），并且有人以特殊方式为Vue 3 Composition API做了类似的事情。很抱歉，我没有找到Vue 2/Vuex示例。