Как получить доступ к мутациям модулей Vuex
Я прочитал его документацию из 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.
Вы знаете, как получить доступ к геттерам и мутациям модуля?
РЕДАКТИРОВАТЬ
Как выяснил Джейкоб, к мутациям можно получить доступ по его идентификатору уникальный. Да будет так, и я переименовал мутацию и теперь у меня есть доступ.
вот моя мутация:
mutations: {
REPLACE_OPEN_DASH_LISTINGS(state, payload){
state.listings = payload
},
}
Вот мое состояние
state: {
listings:[{
id: 0,
location: {},
...
}]
}
Когда я выполняю фиксацию с полезной нагрузкой массива, состояние сохраняет только ОДИН элемент. Предоставляя массив полезной нагрузки из 4, он возвращает мне массив из 1.
Что мне не хватает?
Спасибо!
Спасибо, Джейкоб, почему эта команда не сохраняет массивы? Я загружаю массив из 4 и получаю массив из 1. Есть ли естественный предел или это только мой код?
возможно что-то не так с кодом мутации
Спасибо, @JacobGoh, см. Редактировать. Я не понимаю, что мне здесь не хватает.
код кажется нормальным. Можете ли вы также показать код, в котором вы получаете данные для фиксации мутации?
Ответы 1
Это хорошая идея, IMHO, вызывать действия 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]);
},
}
реактивность не срабатывает. Использование
Vue.$set()усиливает реактивность для некоторых переменных, которые иначе не сработали бы. Это важно для вложенных данных (например, объекта объекта), потому что vue не создает установщик / получатель для каждой точки данных внутри объекта или массива, а только для верхнего уровня.остальное деструктурирование. Массивы:
[...myArray]Объекты:{...myObj}. Это предотвращает изменение данных другим процессом, назначая содержимое массива / объекта как новый массив / объект. Однако обратите внимание, что это только один уровень, поэтому глубоко вложенные данные все равно будут сталкиваться с этой проблемой.
Спасибо Даниилу за понимание. В то время как Джейкоб отвечал на исходный вопрос, я хотел решить его и выразить это как ответ. Что касается того, почему массивы не работают, я обнаружил, что состояние заменялось после каждого обновления где-то еще в моем коде и, таким образом, возвращало массив 1.
вот почему рекомендуется использовать [...payload], так как это предотвратит изменение массива вне мутации.
this.$store.commit('REPLACE_LISTINGS', res). независимо от модуля имя мутации должно быть уникальным. если вы не используете пространство имен