Chào mừng các bạn đế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 mà không cần sử dụng `setup()`. Với sự phát triển không ngừng của Vuejs và các công nghệ liên quan, việc hiểu rõ cách sử dụng Pinia một cách linh hoạt và hiệu quả là vô cùng quan trọng. Hãy cùng Cafedev tìm hiểu về cách sử dụng Pinia Vuejs mà không cần phụ thuộc vào `setup()` và khám phá những tính năng mới mẻ trong quá trình phát triển ứng dụng web!
Pinia có thể được sử dụng ngay cả khi bạn không sử dụng Composition API (nếu bạn đang sử dụng Vue <2.7, bạn vẫn cần cài đặt plugin @vue/composition-api). Trong khi chúng tôi khuyến nghị bạn thử nghiệm và học Composition API, có thể đây chưa phải là thời điểm phù hợp cho bạn và nhóm của bạn, bạn có thể đang trong quá trình chuyển đổi ứng dụng, hoặc bất kỳ lý do nào khác. Có một số hàm:
– mapStores
– mapState
– mapWritableState
– ⚠️ mapGetters (chỉ để thuận tiện trong quá trình chuyển đổi, sử dụng mapState() thay thế)
– mapActions
Nội dung chính
1. Cho phép truy cập vào toàn bộ store
Nếu bạn cần truy cập vào hầu hết mọi thứ từ store, việc ánh xạ mỗi thuộc tính của store có thể quá nhiều… Thay vào đó, bạn có thể truy cập vào toàn bộ store với mapStores():
import { mapStores } from 'pinia'
// given two stores with the following ids
const useUserStore = defineStore('user', {
// ...
})
const useCartStore = defineStore('cart', {
// ...
})
export default {
computed: {
// note we are not passing an array, just one store after the other
// each store will be accessible as its id + 'Store'
...mapStores(useCartStore, useUserStore)
},
methods: {
async buyStuff() {
// use them anywhere!
if (this.userStore.isAuthenticated()) {
await this.cartStore.buy()
this.$router.push('/purchased')
}
},
},
}Theo mặc định, Pinia sẽ thêm hậu tố "Store" vào id của mỗi store. Bạn có thể tùy chỉnh hành vi này bằng cách gọi setMapStoreSuffix():
import { createPinia, setMapStoreSuffix } from 'pinia'
// completely remove the suffix: this.user, this.cart
setMapStoreSuffix('')
// this.user_store, this.cart_store (it's okay, I won't judge you)
setMapStoreSuffix('_store')
export const pinia = createPinia()2. TypeScript
Theo mặc định, tất cả các trợ giúp ánh xạ đều hỗ trợ tính năng tự động hoàn thiện và bạn không cần phải làm gì cả. Nếu bạn gọi setMapStoreSuffix() để thay đổi hậu tố "Store", bạn sẽ cần thêm nó ở một nơi nào đó trong một tệp TS hoặc tệp global.d.ts của bạn. Nơi thuận tiện nhất sẽ là cùng một nơi mà bạn gọi setMapStoreSuffix():
import { createPinia, setMapStoreSuffix } from 'pinia'
setMapStoreSuffix('') // completely remove the suffix
export const pinia = createPinia()
declare module 'pinia' {
export interface MapStoresCustomization {
// set it to the same value as above
suffix: ''
}
}cảnh báo Nếu bạn đang sử dụng một tệp khai báo TypeScript (như global.d.ts), đảm bảo import 'pinia' ở đầu của nó để tiết lộ tất cả các loại hiện có.
Cảm ơn bạn đã đọc bài viết về Pinia Vuejs mà không cần sử dụng `setup()` 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 sử dụng Pinia trong ứng dụng Vuejs của mình một cách linh hoạt và tiện lợi. Đừ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 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!
