0Pricing
Vue Academy · Урок

defineStore: состояние, геттеры и действия

Хранилище Options против хранилища Setup, состояние как функция, вычисляемые геттеры и асинхронные действия

«defineStore: состояние, геттеры и действия» — бесплатный урок Vue Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 4 уроков всего.

Три опоры хранилища

Хранилище параметров состоит из трёх частей: состояния (данные), геттеров (производные значения) и действий (методы, изменяющие состояние). Все три части определяются внутри defineStore.

Определение хранилища

defineStore принимает уникальную строку id и объект параметров. Он возвращает композабл, который по соглашению называют useXxxStore.

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  // state, getters, actions go here
})

Состояние — это функция

Параметр state должен быть функцией, возвращающей объект. Это гарантирует, что каждый экземпляр хранилища получит новое состояние, как и data() в компонентах.

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0, name: 'Coddy' })
})

Чтение состояния

Вызовите композабл хранилища внутри setup, чтобы получить экземпляр, а затем обращайтесь к свойствам состояния напрямую. Они реактивны.

const counter = useCounterStore()
console.log(counter.count) // 0

Геттеры — это вычисляемые значения

getters похожи на свойства computed. Каждый геттер получает state первым аргументом и возвращает производное значение. Результаты кэшируются.

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 2 }),
  getters: {
    doubled: (s) => s.count * 2
  }
})

Использование геттера

Обращайтесь к геттеру как к свойству — без круглых скобок. Pinia пересчитывает его только при изменении зависимостей.

const counter = useCounterStore()
console.log(counter.doubled) // 4

Геттеры, ссылающиеся на другие геттеры

Чтобы использовать другой геттер, обращайтесь к this, а не к параметру состояния. При использовании this не применяйте стрелочную функцию.

getters: {
  doubled: (s) => s.count * 2,
  quadrupled() {
    return this.doubled * 2
  }
}

Действия изменяют состояние

actions — это методы. Они используют this, чтобы напрямую читать и изменять состояние. Не нужны ни commit, ни dispatch — просто вызовите метод.

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  actions: {
    increment() { this.count++ },
    addBy(amount) { this.count += amount }
  }
})

Асинхронные действия

Действия могут быть async. Именно здесь выполняются вызовы API: получите данные, а затем присвойте результат состоянию.

actions: {
  async loadUser(id) {
    const res = await fetch('/api/users/' + id)
    this.user = await res.json()
  }
}

Использование хранилища в компоненте

Импортируйте композабл, вызовите его в <script setup> и используйте состояние, геттеры и действия в шаблоне.

<script setup>
import { useCounterStore } from '@/stores/counter'
const counter = useCounterStore()
</script>

<template>
  <p>{{ counter.count }} -> {{ counter.doubled }}</p>
  <button @click="counter.increment()">+</button>
</template>

Изменение нескольких полей

Чтобы одновременно изменить несколько полей состояния, используйте $patch. Он объединяет изменения в одну запись в инструментах разработчика.

counter.$patch({ count: 10, name: 'New' })

Быстрая проверка

Проверьте свои знания о структуре хранилища параметров.

Итоги

Хранилище параметров состоит из трёх частей:

  • state: функция, возвращающая объект данных.
  • getters: кэшируемые производные значения, получающие состояние (или использующие this).
  • actions: методы, напрямую изменяющие состояние через this.

Используйте хранилище, вызвав его композабл внутри setup.

Часто задаваемые вопросы

Урок «defineStore: состояние, геттеры и действия» бесплатный?

Да — полный текст урока «defineStore: состояние, геттеры и действия» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 4 уроков всего.

Чему я научусь в уроке «defineStore: состояние, геттеры и действия»?

Хранилище Options против хранилища Setup, состояние как функция, вычисляемые геттеры и асинхронные действия Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Vue Academy?

Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «defineStore: состояние, геттеры и действия»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Vue Academy?

Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Pinia против Vuex: причины перехода
  2. defineStore: состояние, геттеры и действия
  3. Композиция хранилищ и доступ между хранилищами
  4. Сохранение состояния Pinia и DevTools
← Назад к Vue Academy