Как получить доступ к мутациям модулей Vuex

Question

Я прочитал его документацию по vue , но ничего не нашел о том, как на самом деле получить доступ к определенному модулю в магазине, когда у вас есть несколько модулей.

Вот мой магазин:

export default new Vuex.Store({
  modules: {
    listingModule: listingModule,
    openListingsOnDashModule: listingsOnDashModule,
    closedListingsOnDashModule: listingsOnDashModule
  }
})

Каждый модуль имеет свое состояние, мутации и геттеры.

состояние может быть успешно доступно через

this.$store.state.listingModule // <-- access listingModule

То же самое не верно для доступа к мутациям, когда я делаю это

this.$store.listingModule.commit('REPLACE_LISTINGS', res)

или

this.$store.mutations.listingModule.commit('REPLACE_LISTINGS', res)

Я получаю либо this. $ Store.listingModule, либо this. $ Store.mutations undefined error.

Знаете ли вы, как следует обращаться к получателям и мутациям модуля?

EDIT

Как показал Джейкоб, к мутациям можно обратиться по его уникальному идентификатору. Да будет так, и я переименовал мутацию и теперь имею доступ.

вот моя мутация:

mutations: {
    REPLACE_OPEN_DASH_LISTINGS(state, payload){
      state.listings = payload
    },
 }

Вот мое состояние

state: {
    listings:[{
      id: 0,
      location: {},
      ...
    }]
}

Поскольку я делаю коммит с полезной нагрузкой массива, состояние сохраняет только ОДИН элемент. Если передать массив полезных данных, равный 4, он вернет мне обратно массив 1.

.

Чего мне не хватает?

Спасибо!

Answer 1

Это хорошая идея, имхо, вызывать действия vuex вместо вызова мутаций. К действию можно легко получить доступ, не беспокоясь о том, какой модуль вы используете, и это полезно, особенно если вы выполняете какое-либо асинхронное действие. https://vuex.vuejs.org/en/actions.html

При этом, как уже отмечал Джейкоб, имена мутаций уникальны, поэтому многие шаблоны / примеры vuex имеют отдельный файл, называемый mutation-types.js, который помогает организовать все мутации.

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

Хотя я не могу сказать, почему это не работает, я бы посоветовал вам попробовать использовать это, поскольку это может решить две общие проблемы

import Vue from 'vue'
//...
mutations: {
    REPLACE_OPEN_DASH_LISTINGS(state, payload){
      Vue.$set(state, 'listings', [...payload]);
    },
 }

1. реакционная способность не срабатывает. Использование Vue.$set() заставляет реактивность активировать некоторые переменные, которые иначе не сработали бы. Это важно для вложенных данных (например, объекта объекта), потому что vue не создает установщик / получатель для каждой точки данных внутри объекта или массива, только верхний уровень.

2. Остальная деструкция. Массивы: [...myArray] Объекты: {...myObj}. Это предотвращает изменение данных другим процессом, назначая содержимое массива / объекта в качестве нового массива / объекта. Обратите внимание, что это только один уровень глубины, поэтому глубоко вложенные данные все равно будут видеть эту проблему.