Использование без setup()
Pinia можно использовать даже если вы не используете сomposition API (если вы используете Vue <2.7, вам все равно нужно установить плагин @vue/composition-api). Хотя мы рекомендуем вам попробовать Composition API и изучить его, возможно, сейчас не самое подходящее время для вас и вашей команды, вы можете находиться в процессе миграции приложения или по какой-либо другой причине. Существует несколько функций:
- mapStores
- mapState
- mapWritableState
- ⚠️ mapGetters (для удобства миграции вместо этого используйте
mapState().) - mapActions
Предоставление доступа ко всему хранилищу
Если вам нужен доступ практически ко всему в хранилище, то может быть слишком сложно сопоставлять каждое свойство хранилища... Вместо этого вы можете получить доступ ко всему хранилищу с помощью mapStores():
import { mapStores } from 'pinia' // даны два хранилища со следующими ids const useUserStore = defineStore('user', { // ... }) const useCartStore = defineStore('cart', { // ... }) export default { computed: { // обратите внимание, что мы передаем не массив, а просто одно хранилище за другим // каждое хранилище будет доступно как его id + 'Store' ...mapStores(useCartStore, useUserStore), }, methods: { async buyStuff() { // используйте их где угодно! if (this.userStore.isAuthenticated()) { await this.cartStore.buy() this.$router.push('/purchased') } }, }, }По умолчанию Pinia добавляет суффикс "Store" к id каждого хранилища. Вы можете настроить это поведение, вызвав функцию setMapStoreSuffix():
import { createPinia, setMapStoreSuffix } from 'pinia' // полностью удаляем суффикс: this.user, this.cart setMapStoreSuffix('') // this.user_store, this.cart_store (ничего страшного, я вас не осуждаю) setMapStoreSuffix('_store') export const pinia = createPinia()TypeScript
По умолчанию все map-помощники поддерживают автозавершение, и вам не нужно ничего делать. Если вы вызываете setMapStoreSuffix(), чтобы изменить суффикс "Store", вам также потребуется добавить его где-то в файле TS или в файле global.d.ts. Самым удобным местом было бы то же место, где вы вызываете setMapStoreSuffix():
import { createPinia, setMapStoreSuffix } from 'pinia' setMapStoreSuffix('') // полностью удалить суффикс export const pinia = createPinia() declare module 'pinia' { export interface MapStoresCustomization { // установить его в то же значение, что и выше suffix: '' } }Предупреждение
Если вы используете файл декларации TypeScript (например, global.d.ts), не забудьте указать в его верхней части import 'pinia' для раскрытия всех существующих типов.