В Vue.js Vuex — это библиотека управления состоянием, которая помогает управлять общим состоянием компонентов предсказуемым образом. Одной из мощных функций Vuex является возможность определять геттеры — функции, позволяющие получать доступ к производному состоянию и вычислять его на основе текущего состояния. В этой статье мы рассмотрим различные методы доступа к геттерам Vuex внутри мутаций с примерами кода и разговорными объяснениями.

Метод 1: прямой доступ
Самый простой способ получить доступ к методу получения в мутации — напрямую ссылаться на него с помощью объекта rootGetters. Этот объект предоставляет доступ ко всем геттерам, определенным в вашем хранилище Vuex. Вот пример:

// Vuex store
const store = new Vuex.Store({
  state: {
    count: 0
  },
  getters: {
    doubleCount: state => state.count * 2
  },
  mutations: {
    increment(state) {
      const doubleCount = this.rootGetters.doubleCount;
      state.count += doubleCount;
    }
  }
});

Метод 2: использование второго аргумента
При совершении мутации вы можете передать второй аргумент, известный как payload. Это можно использовать для передачи дополнительных данных, включая значения метода получения. Вот пример:

// Vuex store
const store = new Vuex.Store({
  state: {
    count: 0
  },
  getters: {
    doubleCount: state => state.count * 2
  },
  mutations: {
    increment(state, payload) {
      const doubleCount = payload.doubleCount;
      state.count += doubleCount;
    }
  }
});
// Committing the mutation
store.commit('increment', { doubleCount: store.getters.doubleCount });

Метод 3: использование помощника MapGetters
Vue предоставляет вспомогательную функцию под названием mapGetters, которая позволяет напрямую сопоставлять геттеры Vuex с локальными вычисляемыми свойствами. Это упрощает доступ к геттерам внутри мутаций. Вот пример:

// Vuex store
const store = new Vuex.Store({
  state: {
    count: 0
  },
  getters: {
    doubleCount: state => state.count * 2
  },
  mutations: {
    increment(state) {
      const doubleCount = this.getters.doubleCount;
      state.count += doubleCount;
    }
  }
});
// Component
import { mapGetters } from 'vuex';
export default {
  computed: {
    ...mapGetters(['doubleCount'])
  },
  methods: {
    incrementCount() {
      this.$store.commit('increment');
    }
  }
};

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