🔥CHỌN LỌC TOP NHỮNG KHOÁ HỌC LẬP TRÌNH ONLINE NHIỀU NGƯỜI THEO HOC TẠI ĐÂY🔥

Chào mừng độc giả đến với Cafedev! Trong bài viết này, chúng ta sẽ khám phá về việc sử dụng Pinia Vuejs cùng với Nuxt.js. Với sự phát triển mạnh mẽ của các ứng dụng web hiện đại, việc hiểu rõ về cách tích hợp và tận dụng sức mạnh của Pinia trong một framework như Nuxt.js là vô cùng quan trọng. Hãy cùng Cafedev tìm hiểu về cách Pinia Vuejs có thể nâng cao trải nghiệm phát triển của bạn và tạo ra các ứng dụng web mạnh mẽ!

Sử dụng Pinia với Nuxt dễ dàng hơn vì Nuxt lo lắng cho nhiều điều khi đến vấn đề render phía máy chủ. Ví dụ, bạn không cần phải quan tâm đến việc serialize hoặc các cuộc tấn công XSS. Pinia hỗ trợ Cầu nối Nuxt và Nuxt 3. Đối với hỗ trợ Nuxt 2 trần trụi, xem phía dưới.

1. Cài đặt

yarn add pinia @pinia/nuxt
# or with npm
npm install pinia @pinia/nuxt

gợi ý Nếu bạn đang sử dụng npm, bạn có thể gặp phải một lỗi ERESOLVE unable to resolve dependency tree. Trong trường hợp đó, thêm nội dung sau vào package.json của bạn:

"overrides": {
  "vue": "latest"
}

Chúng tôi cung cấp một module để xử lý mọi thứ cho bạn, bạn chỉ cần thêm nó vào modules trong tệp nuxt.config.js của bạn:

// nuxt.config.js
export default defineNuxtConfig({
  // ... other options
  modules: [
    // ...
    '@pinia/nuxt',
  ],
})

Và đó là tất cả, sử dụng store của bạn như thông thường!

2. Chờ đợi cho các hành động trên trang

Như với onServerPrefetch(), bạn có thể gọi một hành động của store trong asyncData(). Với cách hoạt động của useAsyncData(), đảm bảo trả về một giá trị. Điều này sẽ cho phép Nuxt bỏ qua việc chạy hành động trên phía máy khách và tái sử dụng giá trị từ máy chủ.

{3-4}
<script setup>
const store = useStore()
// we could also extract the data, but it's already present in the store
await useAsyncData('user', () => store.fetchUser())
</script>

Nếu hành động của bạn không trả về một giá trị, bạn có thể thêm bất kỳ giá trị không nullish nào:

{3}
<script setup>
const store = useStore()
await useAsyncData('user', () => store.fetchUser().then(() => true))
</script>

gợi ý
Nếu bạn muốn sử dụng một store bên ngoài setup(), hãy nhớ truyền đối tượng pinia vào useStore(). Chúng tôi đã thêm nó vào bối cảnh để bạn có thể truy cập vào nó trong asyncData() và fetch():

import { useStore } from '~/stores/myStore'

export default {
  asyncData({ $pinia }) {
    const store = useStore($pinia)
  },
}

3. Tự động nhập

Theo mặc định @pinia/nuxt tiết lộ một số tự động nhập:
– usePinia(), tương tự như getActivePinia() nhưng hoạt động tốt hơn với Nuxt. Bạn có thể thêm tự động nhập để làm cho cuộc sống của bạn dễ dàng hơn:
– defineStore() để định nghĩa các store
– storeToRefs() khi bạn cần trích xuất các refs cá nhân từ một store
– acceptHMRUpdate() cho sự thay thế mô-đun nóng
Nó cũng tự động nhập tất cả các store được định nghĩa trong thư mục stores của bạn. Tuy nhiên, nó không tìm kiếm các store lồng nhau. Bạn có thể tùy chỉnh hành vi này bằng cách thiết lập tùy chọn storesDirs:

// nuxt.config.ts
export default defineNuxtConfig({
  // ... other options
  modules: ['@pinia/nuxt'],
  pinia: {
    storesDirs: ['./stores/**', './custom-folder/stores/**'],
  },
})

Lưu ý các thư mục là tương đối đến gốc của dự án của bạn. Nếu bạn thay đổi tùy chọn srcDir, bạn cần điều chỉnh các đường dẫn tương ứng.

4. Nuxt 2 mà không có bridge

Pinia hỗ trợ Nuxt 2 cho đến @pinia/nuxt v0.2.1. Đảm bảo cài đặt @nuxtjs/composition-api kèm theo pinia:

yarn add pinia @pinia/nuxt@0.2.1 @nuxtjs/composition-api
# or with npm
npm install pinia @pinia/nuxt@0.2.1 @nuxtjs/composition-api

Chúng tôi cung cấp một module để xử lý mọi thứ cho bạn, bạn chỉ cần thêm nó vào buildModules trong tệp nuxt.config.js của bạn:

// nuxt.config.js
export default {
  // ... other options
  buildModules: [
    // Nuxt 2 only:
    // https://composition-api.nuxtjs.org/getting-started/setup#quick-start
    '@nuxtjs/composition-api/module',
    '@pinia/nuxt',
  ],
}

4.1 TypeScript

Nếu bạn đang sử dụng Nuxt 2 (@pinia/nuxt < 0.3.0) với TypeScript hoặc có một jsconfig.json, bạn cũng nên thêm các loại cho context.pinia:

on
{
  "types": [
    // ...
    "@pinia/nuxt"
  ]
}

Điều này cũng đảm bảo bạn có tính năng tự động hoàn thiện 😉.

4.2 Sử dụng Pinia cùng với Vuex

Được khuyến nghị tránh sử dụng cả Pinia và Vuex nhưng nếu bạn cần sử dụng cả hai, bạn cần thông báo cho pinia biết để không tắt nó:

// nuxt.config.js
export default {
  buildModules: [
    '@nuxtjs/composition-api/module',
    ['@pinia/nuxt', { disableVuex: false }],
  ],
  // ... other options
}

Cảm ơn bạn đã đọc bài viết về Pinia Vuejs với Nuxt.js trên Cafedev. Chúng tôi hy vọng rằng thông qua nội dung này, bạn đã có cái nhìn tổng quan và kiến thức sâu sắc hơn về cách sử dụng Pinia trong môi trường Nuxt.js. Đừng ngần ngại tiếp tục theo dõi những bài viết mới nhất trên trang web của chúng tôi để cập nhật những kiến thức và kỹ năng mới nhất trong lĩnh vực công nghệ. Hẹn gặp lại bạn trong những bài viết tiếp theo trên Cafedev!

Tham khảo thêm: MIỄN PHÍ 100% | Series tự học Vuejs từ cơ bản tới nâng cao

Các nguồn kiến thức MIỄN PHÍ VÔ GIÁ từ cafedev tại đây

Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của CafeDev để nhận được nhiều hơn nữa:

Chào thân ái và quyết thắng!

Đăng ký kênh youtube để ủng hộ Cafedev nha các bạn, Thanks you!

BÀI VIẾT LIÊN QUANXEM THÊM