Chào mừng độc giả đến với Cafedev! Trong bài viết này, chúng ta sẽ khám phá cách sử dụng Pinia Vuejs và việc sử dụng một store bên ngoài một component. Với sự phát triển liên tục của các ứng dụng web, việc hiểu và tận dụng tính linh hoạt của Pinia cùng với việc quản lý trạng thái trong các ứng dụng Vuejs là rất quan trọng. Hãy cùng Cafedev khám phá cách sử dụng Pinia Vuejs và việc làm thế nào để sử dụng một store bên ngoài phạm vi của một component để tối ưu hóa trải nghiệm phát triển của bạn!
Các store của Pinia phụ thuộc vào phiên bản pinia để chia sẻ cùng một phiên bản store qua tất cả các cuộc gọi. Hầu hết thời gian, điều này hoạt động mà không cần phải làm gì thêm chỉ bằng cách gọi hàm useStore() của bạn. Ví dụ, trong setup(), bạn không cần phải làm gì khác. Nhưng mọi thứ sẽ khác một chút ngoài phạm vi của một component. Đằng sau các dòng lệnh, useStore() chèn phiên bản pinia bạn đã cung cấp vào ứng dụng của bạn. Điều này có nghĩa là nếu phiên bản pinia không thể được chèn tự động, bạn phải cung cấp nó cho hàm useStore() thủ công. Bạn có thể giải quyết vấn đề này khác nhau tùy thuộc vào loại ứng dụng bạn đang viết.
Nội dung chính
1. Ứng dụng Trang Đơn
Nếu bạn không thực hiện bất kỳ SSR (Server Side Rendering) nào, bất kỳ cuộc gọi của useStore() sau khi cài đặt plugin pinia với app.use(pinia) sẽ hoạt động:
import { useUserStore } from '@/stores/user'
import { createPinia } from 'pinia';
import { createApp } from 'vue'
import App from './App.vue'
// ❌ fails because it's called before the pinia is created
const userStore = useUserStore()
const pinia = createPinia()
const app = createApp(App)
app.use(pinia)
// ✅ works because the pinia instance is now active
const userStore = useUserStore()Cách đơn giản nhất để đảm bảo điều này luôn được áp dụng là trì hoãn cuộc gọi của useStore() bằng cách đặt chúng vào bên trong các hàm sẽ luôn chạy sau khi pinia được cài đặt.
Hãy xem xét ví dụ này về việc sử dụng một store trong một navigation guard với Vue Router:
import { createRouter } from 'vue-router'
const router = createRouter({
// ...
})
// ❌ Depending on the order of imports this will fail
const store = useStore()
router.beforeEach((to, from, next) => {
// we wanted to use the store here
if (store.isLoggedIn) next()
else next('/login')
})
router.beforeEach((to) => {
// ✅ This will work because the router starts its navigation after
// the router is installed and pinia will be installed too
const store = useStore()
if (to.meta.requiresAuth && !store.isLoggedIn) return '/login'
})2. Ứng dụng SSR
Khi làm việc với Server Side Rendering, bạn sẽ phải truyền phiên bản pinia vào useStore(). Điều này ngăn pinia khỏi việc chia sẻ trạng thái toàn cục giữa các phiên bản ứng dụng khác nhau.
Có một phần toàn bộ được dành cho nó trong hướng dẫn SSR, đây chỉ là một giải thích ngắn gọn.
Cảm ơn bạn đã đọc bài viết về việc sử dụng Pinia Vuejs và việc sử dụng một store bên ngoài phạm vi của một component trên Cafedev.Hy vọng rằng thông qua nội dung này, bạn đã có cái nhìn sâu sắc hơn về cách tối ưu hóa việc quản lý trạng thái trong ứng dụng Vuejs của mình. Đừng quên 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 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!
