Для организации взаимодействия с Vuex в приложении на Vue.js используются следующие основные подходы:

Получение состояния (Getters): Используется для получения производного состояния (computed properties) из состояния хранилища.

// в компоненте
import { mapGetters } from 'vuex';

export default {
  computed: {
    // сопоставление геттера хранилища с локальным вычисляемым свойством
    ...mapGetters([
      'doneTodosCount',
      'getTodoById'
    ])
    // или сопоставление с другим именем
    // ...mapGetters({
    //   // сопоставить this.localName к this.$store.getters.getterName
    //   localTodosCount: 'doneTodosCount'
    // })
  },
    methods: {
       // использование геттера с аргументами
       getSpecificTodo(id) {
          return this.getTodoById(id); // Доступ к геттеру как к свойству или методу
       }
    }
}

Получение состояния (State): Прямой доступ к состоянию хранилища.

// в компоненте
import { mapState } from 'vuex';

export default {
  computed: {
    // сопоставление свойства состояния хранилища с локальным вычисляемым свойством
    ...mapState([
      'count'
    ])
    // или сопоставление с другим именем
    // ...mapState({
    //   // сопоставить this.localCount к this.$store.state.count
    //   localCount: 'count'
    // })
  }
}

Изменение состояния (Mutations): Единственный способ изменить состояние хранилища. Должны быть синхронными.

// в компоненте
import { mapMutations } from 'vuex';

export default {
  methods: {
    // сопоставление мутации хранилища с локальным методом
    ...mapMutations([
      'increment' // сопоставить this.increment() к this.$store.commit('increment')
    ])
    // или сопоставление с другим именем
    // ...mapMutations({
    //   add: 'increment' // сопоставить this.add() к this.$store.commit('increment')
    // })
  },
    // вызов мутации
    someMethod() {
       this.increment(); // Или this.add();
    }
}

Асинхронные операции (Actions): Используются для асинхронных операций и вызова мутаций.

// в компоненте
import { mapActions } from 'vuex';

export default {
  methods: {
    // сопоставление действия хранилища с локальным методом
    ...mapActions([
      'incrementAsync' // сопоставить this.incrementAsync() к this.$store.dispatch('incrementAsync')
    ])
    // или сопоставление с другим именем
    // ...mapActions({
    //   addAsync: 'incrementAsync' // сопоставить this.addAsync() к this.$store.dispatch('incrementAsync')
    // })
  },
    // вызов действия
    someMethod() {
        this.incrementAsync(); // Или this.addAsync();
    }
}

Модули (Modules): Разделение хранилища на модули для лучшей организации большого приложения.

// Пример структуры модулей
// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
import moduleA from './modules/moduleA';
import moduleB from './modules/moduleB';

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
});

// store/modules/moduleA.js
const moduleA = {
  namespaced: true, // Включение пространства имен
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++;
    }
  },
  actions: {
    incrementIfOdd ({ state, commit }) {
      if ((state.count + 1) % 2 === 0) {
        commit('increment');
      }
    }
  },
  getters: {
    doubleCount (state) {
      return state.count * 2;
    }
  }
};

export default moduleA;

В компоненте доступ к элементам модуля осуществляется через пространство имен:

// в компоненте
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState('a', [ // Доступ к состоянию модуля 'a'
      'count'
    ]),
    ...mapGetters('a', [ // Доступ к геттерам модуля 'a'
      'doubleCount'
    ])
  },
  methods: {
    ...mapMutations('a', [ // Доступ к мутациям модуля 'a'
      'increment'
    ]),
    ...mapActions('a', [ // Доступ к действиям модуля 'a'
      'incrementIfOdd'
    ])
  }
}

Как организовать взаимодействие с Vuex в приложении на Vue.js?