На что навешивается Getter во Vue?

На что навешивается Getter во Vue?

В Vue, Getter — это специальный тип функции, который используется в контексте Vuex (официальной библиотеки для управления состоянием) и в Computed Properties (вычисляемых свойствах) компонентов Vue. Конкретно, термин "Getter" чаще всего применяется к геттерам Vuex, поэтому рассмотрим этот аспект подробно. Однако важно понимать, что принцип геттеров также воплощается в вычисляемых свойствах компонентов.

Геттеры в Vuex

В Vuex Store, геттеры навешиваются на состояние (state). Их основная цель — получать, фильтровать, комбинировать или преобразовывать данные из состояния перед тем, как они будут использованы в компонентах. Геттеры аналогичны вычисляемым свойствам для состояния хранилища: они являются зависимыми от состояния и автоматически обновляются при его изменении.

// Пример Vuex Store с геттерами
const store = new Vuex.Store({
  state: {
    products: [
      { id: 1, name: 'Laptop', price: 1000, inStock: true },
      { id: 2, name: 'Mouse', price: 25, inStock: false },
      { id: 3, name: 'Keyboard', price: 50, inStock: true }
    ],
    discount: 0.1 // 10% скидка
  },
  getters: {
    // Геттер для получения всех продуктов
    allProducts: (state) => state.products,
    
    // Геттер для получения только доступных продуктов
    availableProducts: (state) => state.products.filter(p => p.inStock),
    
    // Геттер с вычислением итоговой цены с учетом скидки
    discountedPrices: (state) => {
      return state.products.map(product => ({
        ...product,
        finalPrice: product.price * (1 - state.discount)
      }));
    },
    
    // Геттер, который принимает аргумент (id продукта)
    productById: (state) => (id) => {
      return state.products.find(p => p.id === id);
    }
  }
});

Ключевые особенности геттеров Vuex:

• Зависимость от состояния: Геттеры получают state как первый аргумент. Они "навешиваются" на текущее состояние хранилища.
• Вычисляемость: Геттеры кэшируются и пересчитываются только при изменении зависимых частей состояния (подобно computed properties в компонентах).
• Аргументы: Геттеры могут возвращать функции, принимающие дополнительные аргументы (как productById выше), что позволяет динамически фильтровать данные.
• Доступ в компонентах: В компонентах геттеры доступны через mapGetters или прямо через this.$store.getters.

// Использование геттера в компоненте Vue
import { mapGetters } from 'vuex';

export default {
  computed: {
    // Маппинг геттеров на вычисляемые свойства компонента
    ...mapGetters(['availableProducts', 'discountedPrices']),
    
    // Использование геттера с аргументом
    currentProduct() {
      return this.$store.getters.productById(this.selectedProductId);
    }
  }
};

Геттеры как Computed Properties в компонентах Vue

В самих компонентах Vue, вычисляемые свойства (computed properties) выполняют роль геттеров для данных компонента (data, props, другие computed). Они "навешиваются" на реактивные данные компонента и автоматически обновляются.

// Пример computed properties как геттеров в компоненте
export default {
  data() {
    return {
      items: [1, 2, 3, 4, 5],
      filterThreshold: 3
    };
  },
  computed: {
    // Геттер для фильтрации items
    filteredItems() {
      return this.items.filter(item => item > this.filterThreshold);
    },
    
    // Геттер для вычисления суммы
    sumOfItems() {
      return this.items.reduce((sum, item) => sum + item, 0);
    }
  }
};

Отличие от обычных методов

Геттеры (как в Vuex, так и computed) отличаются от обычных методов кэшированием результатов. Они выполняются только при изменении зависимых данных, что повышает производительность. Например, если state.products не меняется, геттер availableProducts не будет повторно фильтровать массив.

Практическое применение и лучшие практики

1. Декомпозиция сложного состояния: Геттеры помогают извлекать сложные данные из состояния без дублирования логики в каждом компоненте.
2. Предварительная обработка данных: Фильтрация, сортировка, агрегация — идеальные задачи для геттеров.
3. Мемоизация: Использование геттеров предотвращает повторные вычисления в разных местах приложения.
4. Тестирование: Геттеры легко тестировать отдельно от компонентов, так как они являются чистыми функциями от состояния.

Вывод

Таким образом, Getter во Vue навешивается на состояние (state) в Vuex Store или на реактивные данные компонента (data, props) в виде computed properties. Это мощный механизм для деривации данных — получения производных значений из исходного состояния с эффективным кэшированием и реактивностью. Использование геттеров способствует соблюдению принципов единой точки управления состоянием и чистоты данных в приложениях Vue.