Vue Academy · Урок

Геттеры и модули

Вычисляйте производное состояние и организуйте хранилище по модулям

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

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

Вычисляемое состояние с помощью геттеров

Иногда требуется производное состояние, например отфильтрованный список или количество элементов. Геттер — это аналог вычисляемого свойства в хранилище: он получает значение из состояния и кэширует результат, пока его зависимости не изменятся.

Определение геттера

Геттер — это функция, которая получает состояние и возвращает производное значение.

getters: {
  completedTodos(state) {
    return state.todos.filter(t => t.done)
  }
}

Геттеры, использующие другие геттеры

Геттер получает вторым аргументом объект со всеми остальными геттерами, поэтому их можно объединять.

getters: {
  completedTodos(state) {
    return state.todos.filter(t => t.done)
  },
  completedCount(state, getters) {
    return getters.completedTodos.length
  }
}

Доступ к геттерам

Читайте геттеры через this.$store.getters в вычисляемом свойстве.

computed: {
  doneCount() {
    return this.$store.getters.completedCount
  }
}

Геттеры в виде методов

Возвращайте из геттера функцию, чтобы передавать ей аргументы. Учтите, что геттеры в виде методов не кэшируются и выполняются при каждом вызове.

getters: {
  todoById: (state) => (id) => {
    return state.todos.find(t => t.id === id)
  }
}

// usage
this.$store.getters.todoById(3)

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

Как и mapState, вспомогательная функция mapGetters автоматически преобразует геттеры в вычисляемые свойства.

import { mapGetters } from "vuex"

export default {
  computed: {
    ...mapGetters(["completedTodos", "completedCount"])
  }
}

Зачем разделять хранилище на модули

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

Определение модуля

Модуль — это обычный объект с теми же параметрами, что и хранилище. Модули регистрируются в ключе modules.

const cart = {
  state: () => ({ items: [] }),
  mutations: {
    addItem(state, item) { state.items.push(item) }
  },
  getters: {
    itemCount: (state) => state.items.length
  }
}

Регистрация модулей

Объединяйте модули в корневом хранилище под ключом modules. Каждый ключ становится именем модуля.

import { createStore } from "vuex"
import cart from "./modules/cart"
import user from "./modules/user"

export const store = createStore({
  modules: { cart, user }
})

Изоляция имён модулей

Установите namespaced: true, чтобы модуль получил собственную область видимости. Это предотвращает конфликты имён между модулями и делает структуру явной.

const cart = {
  namespaced: true,
  state: () => ({ items: [] }),
  getters: {
    itemCount: (state) => state.items.length
  }
}

Доступ к модулям с изолированными именами

При изоляции имён добавляйте имя модуля в начало при фиксации мутаций, запуске действий или чтении геттеров.

// module state lives under the module key
this.$store.state.cart.items

// namespaced getter, mutation, action
this.$store.getters["cart/itemCount"]
this.$store.commit("cart/addItem", item)
this.$store.dispatch("cart/checkout")

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

Проверьте свои знания о геттерах и модулях.

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

Повторение

Геттеры получают кэшированные значения из состояния; доступ к ним осуществляется через this.$store.getters или mapGetters. Модули разделяют большое хранилище на специализированные части; параметр namespaced: true изолирует их, поэтому обращаться к членам нужно с префиксом module/name. Теперь у Вас есть полный набор инструментов Vuex: состояние, мутации, действия, геттеры и модули.

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

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

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

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

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

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

Урок «Геттеры и модули» бесплатный?

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

Чему я научусь в уроке «Геттеры и модули»?

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

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

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

Сколько времени занимает урок «Геттеры и модули»?

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

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

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

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

← Назад к Vue Academy