Question

我正在尝试使用Vue和VueX，尽管一切正常，但存储机制在一方面令人不安。

我有一个组件，可通过axios从远程服务加载一组数据。它可以正常工作，并在创建组件时调用。

export default {
  created() {
    this.$store.dispatch('foo/getBar');
  }
  ...
}

这会正确地使用api调用返回的valeus填充组件中的“ bar”变量。

下次查看应用程序中的组件时，将再次调用创建的函数，并再次调用api，这将返回相同的数据。

在我们知道要收集不同的数据之前，避免后续呼叫的最佳实践方法是什么？或更准确地说，如何在必要时使存储中的数据无效，以便仅在需要时才进行api调用？

Answer 1

您可以将api调用放置到父组件或根组件，然后将刷新按钮放置到子组件。

或者您可以检查变量bar是否为空，然后进行api调用。