Bất đồng bộ dữ liệu trong Nuxt.js
Bài đăng này đã không được cập nhật trong 5 năm
Xin chào các bạn. Hôm nay mình sẽ tiếp tục series về Nuxt.js. Cụ thể mình sẽ giới thiệu với các bạn Bất đồng bộ dữ liệu trong Nuxt.js
Phương thức asyncData
Đôi khi bạn chỉ muốn lấy dữ liệu và gửi lại về phía server mà không cần sử dụng store. asyncData được gọi mỗi lần trước khi tải page. Nó sẽ được gọi vào server một lần (tại yêu cầu đầu tiên cho ứng dụng Nuxt) và phía client điều hướng đến routes tiếp theo. Phương thức này lấy bối cảnh làm đối số đầu tiên, bạn có thể sử dụng nó để lấy 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 cung cấp cho bạn những cách khác nhau để sử dụng asyncData.
- Trả lại một
Promise. Nuxt.js sẽ chopromiseđược giải quyết trước khi thực hiện. - Sử dụng async/await.
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ừ async/await sẽ được hợp nhất với dữ liệu. Bạn có thể hiển thị dữ liệu bên trong template 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 từ khóa trong context, hãy xem API Essential context.
Sử dụng req/res
Khi asyncData được gọi từ phía server , bạn có thể truy cập vào req và res đố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 route động
Bạn cũng có thể sử dụng context làm tham số để truy cập dữ liệu route động!. Ví dụ, các tham số của route có thể được truy cập bằng tên của file hoặc thư mục đã cấu hình lên nó. Nếu bạn xác định được một file có tên _slug.vue trong pages thư 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 phương pháp asyncData sẽ không được gọi vào trong truy vấn mặc định. Nếu bạn muốn thay đổi thuộc tính này này, Ví dụ khi xây dựng chức năng phân trang, bạn có thể thiết lập các tham số cần listen với thuộc tính watchQuery trong các compenent page của bạn. Tìm hiểu thêm về API watchQuery
Xử lý Lỗi
Nuxt.js thêm một phương thức error(params) trong context, bạn có thể dùng để hiện thị lỗi lên page của mình. params.statusCode cũng sẽ được sử dụng để hiển thị status code từ phía server.
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' })
})
}
}
Nếu muốn tùy chỉnh lại trang lỗi. Có thể xem thêml
Dưới đây mình đã giới thiệu với các bạn về bất đồng bộ dữ liệu trong Nuxt.js. Nếu có bất kì thắc mắc gì hãy để lại comment ở phía dưới nhé.
Tham Khảo
All rights reserved
