Ra mắt hai series mới cực hot Trí tuệ nhân tạo A đến ZPython công cụ không thể thiếu khi nghiên cứu Data science, Machine learning.

Tải dữ liệu trong vue-router

Trong quá trình phát triển ứng dụng, đôi khi bạn cần lấy dữ liệu từ máy chủ khi một route được kích hoạt. Ví dụ: hiển thị danh mục trong một diễn đàn, bạn cần tìm và nạp dữ liệu danh mục từ máy chủ. Chúng ta có hai cách thực hiện tải dữ liệu ở các thời điểm khác nhau:

  • Tải dữ liệu sau khi điều hướng: thực hiện điều hướng trước tiên và sau đó tải dữ liệu bằng cách sử dụng hook phù hợp trong vòng đời thực thể. Hiển thị trạng thái đang tải dữ liệu khi thực hiện.

  • Tải dữ liệu trước khi điều hướng: Dữ liệu được tìm và nạp trước khi thực hiện điều hướng. Cả hai kỹ thuật đều là những lựa chọn tốt, bạn chọn kỹ thuật nào phụ thuộc vào kinh nghiệm cũng như ngữ cảnh bạn muốn nhắm tới. (Xem thêm Thực thể Vue để hiểu khái niệm về hook và vòng đời thực thể)

Tải dữ liệu sau khi điều hướng

Khi sử dụng giải pháp này, chúng ta điều hướng và hiển thị các component liên quan ngay lập tức, sau đó tìm và nạp dữ liệu trong hook created của component. Từ đây, chúng ta có thể hiển thị trạng thái tải dữ liệu và xử lý việc tải cho các view. Ví dụ dưới đây giả sử chúng ta có một component là Post cần lấy dữ liệu về bài viết dựa trên id bài viết được đưa vào tham số trên đường dẫn $route.params.id.

<template>
  <div class="post">
    <div class="loading" v-if="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>
<script>
export default {
  data () {
    return {
      loading: false,
      post: null,
      error: null
    }
  },
  created () {
    // fetch the data when the view is created and the data is
    // already being observed
    this.fetchData()
  },
  watch: {
    // call again the method if the route changes
    '$route': 'fetchData'
  },
  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
        }
      })
    }
  }
}
</script>

Tải dữ liệu trước khi điều hướng

Kỹ thuật này chúng ta tìm nạp dữ liệu trước khi thực hiện điều hướng đến route mới. Chúng ta có thể thực hiện tải dữ liệu trong beforeRouteEnter trong component và chỉ tiếp tục khi quá trình tải dữ liệu kết thúc:

<script>
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.
  beforeRouteUpdate (to, from, next) {
    this.post = null
    getPost(to.params.id, (err, post) => {
      this.setData(err, post)
      next()
    })
  },
  methods: {
    setData (err, post) {
      if (err) {
        this.error = err.toString()
      } else {
        this.post = post
      }
    }
  }
}
</script>

Người dùng đang dừng ở view trước đó trong khi tài nguyên đã được tìm và nạp cho view tiếp theo. Do đó, trong kỹ thuật này bạn nên hiển thị một thanh tiến trình hoặc một số chỉ báo trong khi dữ liệu được tìm nạp. Nếu việc lấy dữ liệu không thành công, cần thiết phải hiển thị một cảnh báo.


CÁC BÀI VIẾT KHÁC

FirebirD

Đam mê Toán học, Lập trình. Sở thích chia sẻ kiến thức, Phim hài, Bóng đá, Cà phê sáng với bạn bè.

Sử dụng Vue-cli trong ứng dụng Laravel thay thế Laravel Mix

Reactivity system là gì, tại sao liên quan đến hoạt động bên trong Vue.js

0 Bình luận trong "Tải dữ liệu trong vue-router"

Thêm bình luận