Композиция хранилищ и доступ между хранилищами
Использование одного хранилища внутри другого, шаблоны композиции хранилищ и предотвращение циклических зависимостей
«Композиция хранилищ и доступ между хранилищами» — бесплатный урок Vue Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 4 уроков всего.
Хранилища могут использовать другие хранилища
В реальных приложениях несколько хранилищ могут зависеть друг от друга. Хранилищу корзины может понадобиться хранилище авторизации, чтобы узнать текущего пользователя. Pinia упрощает доступ между хранилищами.
Вызов хранилища внутри действия
Внутри действия просто вызовите композабл другого хранилища. Поскольку действия выполняются после активации Pinia, это безопасно.
import { useAuthStore } from './auth'
export const useCartStore = defineStore('cart', {
state: () => ({ items: [] }),
actions: {
checkout() {
const auth = useAuthStore()
if (!auth.isLoggedIn) return
// proceed with auth.userId
}
}
})Синтаксис setup-хранилища
Помимо объекта параметров, defineStore принимает функцию setup. Она похожа на setup компонента: объявите реактивные ссылки и вычисляемые значения, а затем верните их.
import { ref, computed } from 'vue'
export const useCounterStore = defineStore('counter', () => {
const count = ref(0)
return { count }
})Состояние как реактивные ссылки
В setup-хранилище каждый возвращённый ref или reactive становится состоянием. Используйте ref для примитивов, а reactive — для объектов.
export const useUserStore = defineStore('user', () => {
const name = ref('Coddy')
const profile = reactive({ age: 30 })
return { name, profile }
})Геттеры как вычисляемые значения
Возвращённый computed выступает в роли геттера. Он кэшируется и является реактивным, как и геттеры хранилища параметров.
export const useCounterStore = defineStore('counter', () => {
const count = ref(2)
const doubled = computed(() => count.value * 2)
return { count, doubled }
})Действия как функции
Возвращённая функция является действием. Она может напрямую читать и изменять реактивные ссылки с помощью .value.
export const useCounterStore = defineStore('counter', () => {
const count = ref(0)
function increment() { count.value++ }
return { count, increment }
})Возврат реактивных ссылок и вычисляемых значений
Главное правило setup-хранилищ: возвращайте всё, что хотите сделать доступным. Всё невозвращённое остаётся закрытым внутри хранилища.
export const useStore = defineStore('s', () => {
const visible = ref(0)
const secret = ref('hidden') // not returned -> private
return { visible }
})Доступ между хранилищами в setup-хранилище
В setup-хранилище можно вызвать другое хранилище на верхнем уровне и использовать его в вычисляемых значениях или действиях.
export const useCartStore = defineStore('cart', () => {
const auth = useAuthStore()
const canCheckout = computed(() => auth.isLoggedIn)
return { canCheckout }
})Избегание циклических зависимостей
Если хранилище A импортирует хранилище B, а B импортирует A, может возникнуть циклическая зависимость. Не вызывайте другое хранилище на верхнем уровне модуля; вместо этого вызывайте его внутри действия или геттера, где оно необходимо.
// Risky: top-level use in both directions
// Safe: call useOtherStore() lazily inside the action
actions: {
doWork() {
const other = useOtherStore() // resolved at call time
}
}Почему отложенные вызовы помогают
Вызов композабла хранилища внутри функции откладывает разрешение зависимости до выполнения, после загрузки всех модулей. Это разрывает цикл импорта, который приводит к сбою во время вычисления модуля.
Хранилища параметров и setup-хранилища
Оба стиля одинаковы по возможностям. Выбирайте хранилища параметров за знакомую декларативную структуру, а setup-хранилища — когда нужна полная гибкость Composition API, например наблюдатели или композаблы внутри хранилища.
Быстрая проверка
Проверьте, насколько хорошо Вы понимаете объединение хранилищ.
Итоги
Вы научились объединять хранилища:
- Вызывайте композабл другого хранилища внутри действия, чтобы обращаться к данным из другого хранилища.
- Хранилища, созданные через setup, используют функцию: refs — это состояние, computed — геттеры, а функции — действия.
- Возвращайте всё, что хотите сделать доступным.
- Вызывайте хранилища внутри функций по мере необходимости, чтобы избежать циклических зависимостей.
Изучай HTML с ИИ-репетитором — бесплатно
Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.
- Курсы
- 42
- Уроки
- 156
Часто задаваемые вопросы
Урок «Композиция хранилищ и доступ между хранилищами» бесплатный?
Да — полный текст урока «Композиция хранилищ и доступ между хранилищами» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 4 уроков всего.
Чему я научусь в уроке «Композиция хранилищ и доступ между хранилищами»?
Использование одного хранилища внутри другого, шаблоны композиции хранилищ и предотвращение циклических зависимостей Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Vue Academy?
Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.
Сколько времени занимает урок «Композиция хранилищ и доступ между хранилищами»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Vue Academy?
Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Pinia против Vuex: причины перехода
- defineStore: состояние, геттеры и действия
- Композиция хранилищ и доступ между хранилищами
- Сохранение состояния Pinia и DevTools