Vue获取数据的方法

数据获取

有时您需要在激活路由时从服务器获取数据。例如，在呈现用户配置文件之前，您需要从服务器获取用户数据。我们可以通过两种不同的方式实现这一点：

导航后获取

首先执行导航，并在传入组件的生命周期钩子中获取数据。在获取数据时显示加载状态。

Fetching Before Navigation : 在路由进入守卫中导航前获取数据，获取数据后进行导航。

从技术上讲，两者都是有效的选择 - 它最终取决于您的目标用户体验。

导航后获取#使用这种方法时，我们会立即导航和渲染传入的组件，并在组件的created钩子中获取数据。它使我们有机会在通过网络获取数据时显示加载状态，并且我们还可以为每个视图处理不同的加载。

假设我们有一个Post组件需要根据以下内容获取帖子的数据$route.params.id：

<template>
  <div class="post">
    <div v-if="loading" class="loading">Loading...</div>
    <div v-if="error" class="error">{{ error }}</div>
    <div v-if="post" class="content">
      <h2>{{ post.title }}</h2>
      <p>{{ post.body }}</p>
    </div>
  </div>
</template>

export default {
  data() {
    return {
      loading: false,
      post: null,
      error: null,
    }
  },
  created() {
    // watch the params of the route to fetch the data again
    this.$watch(
      () => this.$route.params,
      () => {
        this.fetchData()
      },
      // fetch the data when the view is created and the data is
      // already being observed
      { immediate: true }
    )
  },
  methods: {
    fetchData() {
      this.error = this.post = null
      this.loading = true
      // replace `getPost` with your data fetching util / API wrapper
      getPost(this.$route.params.id, (err, post) => {
        this.loading = false
        if (err) {
          this.error = err.toString()
        } else {
          this.post = post
        }
      })
    },
  },
}

导航前获取

通过这种方法，我们在实际导航到新路线之前获取数据。我们可以beforeRouteEnter在传入组件的守卫中执行数据获取，并且仅next在获取完成时调用：

export default {
  data() {
    return {
      post: null,
      error: null,
    }
  },
  beforeRouteEnter(to, from, next) {
    getPost(to.params.id, (err, post) => {
      next(vm => vm.setData(err, post))
    })
  },
  // when route changes and this component is already rendered,
  // the logic will be slightly different.
  async beforeRouteUpdate(to, from) {
    this.post = null
    try {
      this.post = await getPost(to.params.id)
    } catch (error) {
      this.error = error.toString()
    }
  },
}

在为传入视图获取资源时，用户将停留在前一个视图上。因此，建议在获取数据时显示进度条或某种指示器。如果数据获取失败，还需要显示某种全局警告消息。