javascript - vue2项目，页面调异步请求初始化时，请求方法应该写在哪里，该怎么写才比较好？

Question

正常来说，被缓存的组件应该把初始化的请求写在activated里，没被缓存的应该写在created或者mounted里，我们项目是用meta里的keepAlive字段来控制当前路由是否缓存，用refresh字段来控制页面是否需要刷新数据。目前代码是这样的，但是感觉有点怪怪的，有没有办法优化呢？

  activated() {
    if (this.$store.state.user.refresh) {
      this.$store.commit('refresh', false)
      this.setConfigData()
      this.initData()
    }
  },
  created() {
    if (!this.$store.state.user.refresh) {
      this.setConfigData()
      this.initData()
    }
  },

Answer 1

封装一个单独方法：

methods: {
  fetchData() {
    this.setConfigData()
    this.initData()
  }
},
activated() {
  if (this.$store.state.user.refresh) {
    this.$store.commit('refresh', false)
    this.fetchData()
  }
},
created() {
  if (!this.$store.state.user.refresh) {
    this.fetchData()
  }
},

Answer 2

我大概的理解下你的意思，现在的是否缓存和刷新数据的逻辑判断都是写在组件里面的，显得有点麻烦。
其实你可以这样做：keep-alive 代码可以结合 v-if 进行包裹，如果 meta 中的 keepAlive 为 true 进行缓存，否则不进行缓存。

<keep-alive>
  <router-view v-if="$route.meta.keepAlive" />
</keep-alive>
<router-view v-if="!$route.meta.keepAlive" />

这样，各个组件内部还是正常的逻辑，没有被缓存的组件每次重新加载就会请求数据，被缓存的组件初次加载后再次加载就不再请求数据了。除非在activated钩子请求了数据。

组件钩子执行顺序：
当引入keep-alive 的时候，页面第一次进入，钩子的触发顺序 created -> mounted -> activated，退出时触发 deactivated。
当再次进入（前进或者后退）时，只触发 activated。