Blog về lập trình website

Ở bài trước, bạn đã học cách tạo một store đơn giản trong Pinia. Trong bài này, ta sẽ mở rộng kiến thức bằng cách làm quen với actions (hàm thao tác dữ liệu), getters (biến tính toán phụ thuộc state) và cách tách nhiều store theo module như auth, cart, user, v.v... Đây là kỹ thuật cốt lõi để tổ chức logic rõ ràng, dễ bảo trì trong các dự án thực tế.

Trong các ứng dụng có quy mô trung bình đến lớn, việc quản lý state cục bộ bằng useState đôi khi không đủ linh hoạt. Pinia – thư viện state management chính thức của Vue 3 – là lựa chọn lý tưởng để quản lý state toàn cục, cho phép tổ chức dữ liệu rõ ràng, dễ kiểm soát và mở rộng. Bài học này sẽ hướng dẫn cách tích hợp Pinia vào Nuxt 3, tạo store đầu tiên và sử dụng trong component thực tế.

Trong Nuxt 3, useState là một phương pháp tiện lợi để tạo state cục bộ hoặc chia sẻ giữa các thành phần trong cùng một app, mà không cần thiết lập hệ thống quản lý state phức tạp như Vuex hay Pinia. Bài học này sẽ hướng dẫn bạn cách sử dụng useState, phân biệt với ref và reactive, cũng như cách chia sẻ state này giữa các trang trong ứng dụng Nuxt.

Trong bất kỳ ứng dụng web hiện đại nào, việc giao tiếp với các dịch vụ API là điều không thể thiếu. Nuxt.js hỗ trợ mạnh mẽ cả hai kiểu API phổ biến: RESTful và GraphQL. Bài học này sẽ hướng dẫn bạn cách gọi API REST bằng useFetch(), cách tích hợp dịch vụ GraphQL bằng các công cụ như @nuxtjs/apollo hoặc graphql-request, và cách tổ chức cấu hình endpoint một cách gọn gàng, dễ mở rộng. Cuối cùng là phần demo gọi dữ liệu bài viết từ một API công khai.

Khi làm việc với API, việc xử lý trạng thái tải dữ liệu (loading) và lỗi (error) là rất quan trọng để đảm bảo trải nghiệm người dùng tốt. Nuxt 3 cung cấp cơ chế theo dõi tự động các trạng thái này thông qua các hook như useFetch và useAsyncData. Trong bài học này, bạn sẽ học cách hiển thị skeleton UI, thông báo lỗi rõ ràng, cũng như cách thử lại khi có lỗi xảy ra. Ngoài ra, bạn cũng sẽ thực hành tạo một component danh sách có xử lý loading và error thực tế.

Trong ứng dụng Nuxt 3, dữ liệu có thể được tải từ phía server (trong quá trình SSR) hoặc từ phía client (sau khi trang đã tải xong). Mỗi cách gọi dữ liệu đều có ưu điểm và phù hợp với các tình huống khác nhau. Bài học này sẽ giúp bạn phân biệt rõ hai cách gọi API này, đồng thời hướng dẫn tạo endpoint mock trong thư mục server/api/, và sử dụng useFetch() với các tùy chọn như serverOnly và clientOnly.

Làm việc với dữ liệu từ API là một phần quan trọng trong mọi ứng dụng web. Nuxt 3 cung cấp một bộ hook mạnh mẽ giúp gọi API dễ dàng và tối ưu cho cả SSR lẫn CSR. Trong bài học này, bạn sẽ được làm quen với 3 hook chính: useFetch, useAsyncData, và useLazyFetch. Qua đó, bạn sẽ hiểu được sự khác biệt giữa chúng, cũng như biết cách truyền params và headers khi gọi dữ liệu từ một API mẫu.

Một trong những ưu điểm nổi bật của Nuxt là cơ chế tự động import component, giúp bạn tiết kiệm thời gian và giảm boilerplate khi xây dựng giao diện. Trong bài này, bạn sẽ tìm hiểu cách hoạt động của tính năng auto-import, cách cấu hình trong nuxt.config.ts, cũng như tổ chức thư mục components/ sao cho Nuxt có thể tự động nhận diện các component một cách thông minh.

Khi dự án phát triển ngày càng lớn, việc tổ chức component một cách khoa học là điều bắt buộc để đảm bảo dễ quản lý, dễ mở rộng và dễ tái sử dụng. Trong bài học này, bạn sẽ học các cách tổ chức component theo tính năng hoặc module, cách chia nhỏ giao diện thành các phần logic rõ ràng, cũng như quy ước đặt tên giúp team làm việc đồng nhất hơn.