VueJS: Bất đồng bộ dữ liệu

Bạn có thể muốn tìm nạp dữ liệu và hiển thị nó ở phía máy chủ. Nuxt.js thêm một phương thức asyncData để cho phép bạn xử lý các hoạt động không đồng bộ trước khi khởi tạo component

Phương thức asyncData

Đôi khi bạn chỉ muốn tìm nạp dữ liệu và kết xuất lại trên máy chủ mà không cần sử dụng cửa hàng.asyncDatađược gọi mỗi lần trước khi tải thành phần trang . Nó sẽ được gọi là phía máy chủ một lần (theo yêu cầu đầu tiên cho ứng dụng Nuxt) và phía máy khách khi điều hướng đến các tuyến tiếp theo. Phương thức này nhận bối cảnh làm đối số đầu tiên, bạn có thể sử dụng nó để tìm nạp một số dữ liệu và Nuxt.js sẽ hợp nhất nó với dữ liệu thành phần.

Nuxt.js sẽ tự động hợp nhất đối tượng được trả về với dữ liệu thành phần.

Nuxt.js cung cấp cho bạn những cách khác nhau để sử dụng asyncData. Chọn người bạn quen thuộc nhất:

1. Trở về a Promise. Nuxt.js sẽ đợi lời hứa được giải quyết trước khi kết xuất thành phần.
2. Sử dụng async / await ( tìm hiểu thêm về nó )

Trả lại một promise

export default {
  asyncData ({ params }) {
    return axios.get(`https://my-api/posts/${params.id}`)
    .then((res) => {
      return { title: res.data.title }
    })
  }
}

Sử dụng async/await

export default {
  async asyncData ({ params }) {
    let { data } = await axios.get(`https://my-api/posts/${params.id}`)
    return { title: data.title }
  }
}

Hiển thị dữ liệu

Kết quả từ asyncData sẽ được hợp nhất với dữ liệu. Bạn có thể hiển thị dữ liệu bên trong mẫu của mình giống như bạn đã từng làm:

<template>
  <h1>{{ title }}</h1>
</template>

Bối cảnh

Để xem danh sách các khóa khả dụng context, hãy xem API Essentialcontext .

Sử dụng req/ resđối tượng

Khi asyncDatađược gọi ở phía máy chủ, bạn có quyền truy cập vào reqvà rescác đối tượng của yêu cầu người dùng.

export default {
  async asyncData ({ req, res }) {
    // Please check if you are on the server side before
    // using req and res
    if (process.server) {
     return { host: req.headers.host }
    }

    return {}
  }
}

Truy cập dữ liệu tuyến đường động

Bạn cũng có thể sử dụng contexttham số để truy cập dữ liệu tuyến đường động! Ví dụ, các tham số tuyến động có thể được truy xuất bằng tên của tệp hoặc thư mục đã cấu hình nó. Nếu bạn đã xác định một tệp có tên _slug.vuetrong pagesthư mục của mình , bạn có thể truy cập giá trị qua context.params.slug:

export default {
  async asyncData ({ params }) {
    const slug = params.slug // When calling /abc the slug will be "abc"
    return { slug }
  }
}

Lắng nghe thay đổi truy vấn

Các asyncDataphương pháp không được gọi vào những thay đổi chuỗi truy vấn theo mặc định. Nếu bạn muốn thay đổi hành vi này, ví dụ như khi xây dựng thành phần phân trang, bạn có thể thiết lập các tham số cần lắng nghe với thuộc watchQuerytính của thành phần trang của bạn. Tìm hiểu thêm trên trang APIwatchQuery.

Xử lý lỗi

Nuxt.js thêm error(params)phương thức trong context, mà bạn có thể gọi để hiển thị trang lỗi. params.statusCodecũng sẽ được sử dụng để hiển thị mã trạng thái phù hợp từ phía máy chủ.

Ví dụ với một Promise:

export default {
  asyncData ({ params, error }) {
    return axios.get(`https://my-api/posts/${params.id}`)
    .then((res) => {
      return { title: res.data.title }
    })
    .catch((e) => {
      error({ statusCode: 404, message: 'Post not found' })
    })
  }
}

Để tùy chỉnh trang lỗi, hãy xem hướng dẫn xem .