载入页面，什麽时候发 API 适合？

我们想要找一个适合的地方送出 $store.dispatch('fetchUser', 1); 今天就来聊聊放在哪最适合

一开始，官网教 axios 的地方

Using Axios to Consume APIs — Vue.js

官网教我们用 axios，并且为了将 axios 的资料储存起来，在 mounted 里发 API 确保 data 的存取是没问题的。

  mounted () {
    axios
      .get('https://api.coindesk.com/v1/bpi/currentprice.json')
      .then(response => (this.info = response))
  }

所以，如是你对发送 API 的问题，查阅了官网，就会把 fetchUser 写在 mounted 上面

官网教 lifecycle 的地方

The Vue Instance — Vue.js

当 Vue 执行到 created 的时候，data 会进入 reactivity 系统上。

export default {
  name: 'About',
  data() {
    return {
      user: {
        name: 'chris'
      }
    }
  },
  beforeCreate() {
    console.warn('[component About] beforeCreate', this.user)
  },
  created() {
    console.warn('[component About] created', this.user)
  },
  beforeMount() {
    console.warn('[component About] beforeMount', this.user)
  },
  mounted() {
    console.warn('[component About] mounted', this.user)
  }
};

因为 created 的时候，data 已经宣告完毕，并且可以存取了，所以，如是你了解 lifecycle 就会把 fetchUser 写在 created 上面

如果你用了 vue-router，看了官网

Navigation Guards | Vue Router

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  console.log('[router beforeEach]');
  next()
})

会发现 beforeEach 比 component 还要早触发，如果想要让回传的资料更早拿到让页面载入时，不要看见空白页，再跳出资料的话，放在 befoeEach 是你的好选择。

如果你不想要每一页都 fetchUser

Per-Route Guard, Navigation Guards | Vue Router

通常都是特定页面，才需要特定资料。
像 fetchUser，通常就是有使用者详细资料的页面才会需要。
所以，并不是每一页都要打这一支 API，所以如果可以分成每一页才需要的 API 这样使用上就有效率多了，管理上也方便管理

这时，你就需要 beforeEnter

  {
    path: '/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
    beforeEnter: (to, from, next) => {
      console.log('[router beforeEnter]');
      next()
    }
  },

透过 beforeEach 就可以在页面载入之前，将请求送出去，并且会等待请求回来完成，才载入画面。

如果在 beforeEach 写下了 if (to.path === "/user") 这样的判断，就表示你需要 beforeEnter，透过 beforeEnter 也可以在页面载入之前，将请求送出去，并且会等待请求回来完成，才载入画面，而且各别画面各别设定。