Vue Academy · Урок

Основы Vuex

Разберитесь в хранилище Vuex и централизованном состоянии

Урок 1 из 313 шагов

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

Зачем нужно централизованное состояние

По мере роста приложений Vue обмен данными между множеством компонентов становится неудобным. Передача свойств вниз и отправка событий вверх через глубоко вложенные деревья ненадёжны. Vuex решает эту проблему с помощью единого централизованного хранилища, из которого любой компонент может читать данные и записывать их предсказуемым образом.

Единый источник истины

Vuex следует однонаправленному потоку данных. Всё общее состояние приложения хранится в одном месте, которое называется store. Компоненты читают состояние из хранилища и запрашивают изменения через управляемый программный интерфейс, поэтому Вы всегда знаете, откуда поступают данные и как они изменяются.

Установка Vuex

Vuex 4 — это версия, созданная для Vue 3. Установите её с помощью менеджера пакетов, затем создайте хранилище и зарегистрируйте его в приложении.

npm install vuex@4

Создание хранилища

Используйте createStore, чтобы определить хранилище. Параметр state представляет собой функцию, возвращающую исходный реактивный объект состояния.

import { createStore } from "vuex"

export const store = createStore({
  state() {
    return {
      count: 0,
      user: null
    }
  }
})

Регистрация хранилища

Передайте хранилище приложению с помощью app.use(store). Благодаря этому оно становится доступным каждому компоненту через this.$store.

import { createApp } from "vue"
import App from "./App.vue"
import { store } from "./store"

const app = createApp(App)
app.use(store)
app.mount("#app")

Свойство состояния

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

state() {
  return {
    todos: [],
    isLoading: false,
    theme: "light"
  }
}

Доступ к состоянию в API параметров

Внутри компонента доступ к хранилищу осуществляется через this.$store.state. Вычисляемое свойство сохраняет реактивность значения.

export default {
  computed: {
    count() {
      return this.$store.state.count
    }
  }
}

Использование состояния в шаблоне

После передачи через вычисляемое свойство состояние используется в шаблоне так же, как любое локальное значение.

<template>
  <p>Current count: {{ count }}</p>
</template>

Вспомогательная функция mapState

Ручное написание множества вычисляемых свойств повторяется. Вспомогательная функция mapState создаёт их за Вас на основе массива имён состояния.

import { mapState } from "vuex"

export default {
  computed: {
    ...mapState(["count", "user"])
  }
}

Переименование с помощью mapState

Передайте объект в mapState, чтобы переименовать свойства или вычислить производные значения из состояния.

computed: {
  ...mapState({
    total: "count",
    userName: (state) => state.user ? state.user.name : "Guest"
  })
}

Доступ к состоянию в API композиции

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

import { computed } from "vue"
import { useStore } from "vuex"

export default {
  setup() {
    const store = useStore()
    const count = computed(() => store.state.count)
    return { count }
  }
}

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

Проверьте, насколько хорошо Вы поняли основы Vuex.

Ответь в интерактивном уроке

Итоги

Vuex предоставляет централизованное реактивное хранилище как единый источник истины. Вы создаёте его с помощью createStore, регистрируете через app.use, а состояние state читаете через вычисляемые свойства или вспомогательную функцию mapState. В API композиции доступ к хранилищу осуществляется через useStore(). Далее Вы узнаете, как безопасно изменять это состояние.

Можно начать бесплатно

Изучай HTML с ИИ-репетитором — бесплатно

Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.

Курсы: 42
Уроки: 156

Начать учиться бесплатно Посмотреть полный курс

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

Урок «Основы Vuex» бесплатный?

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

Чему я научусь в уроке «Основы Vuex»?

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

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

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

Сколько времени занимает урок «Основы Vuex»?

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

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

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

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

← Назад к Vue Academy