Можно ли реактивно получать изменения Vuex во внешнем js файле?

Question

[Андрей]

Появилась необходимость получать состояние стора внутри отдельного класса, но так как во время инициализации класса стор пуст, то и в классе нужных данных нет. Есть ли возможность получать внутри класса данные реактивно? Не хочется дублировать логику загрузки и обработки данных и нагружать систему дополнительными вызовами апи.

Answer 1

[Сергей Соколов]

Можно написать функцию-плагин для стора Vuex. В ней слушать события мутаций и делать что-то, например, сообщать левому классу что есть новости.

Пример: функция подписывается на мутации стора. При загрузке страницы запускается Action в сторе, который имитирует асинхронную загрузку чего-то через 1 секунду (увеличит счетчик).

Comments

[Андрей]

Благодарю! Отличный ответ и пример.

Однако данный пример подразумевает, что все нужные плагины будут зарегистрированы при инициализации приложения, тогда как в моём случае необходимо слушать стор динамически, при инициализации конкретных классов.

Вот обновлённый фидл:
JSFiddle

Это решение, к которому я пришел на данный момент. Однако, добиться реактивности пока не удалось. Смысл в том, что нужный слушатель подключается при инициализации класса. В примере всё работает, но тут я передаю класс в компонент через data().

В моём конкретном случае же всё несколько сложнее. Там класс выступает в виде хранилища данных для компонента Vue и передаётся через props. Такие "воркэраунды" были придуманы в ходе решения задачи, которую описал в предыдущем вопросе. И такое решение было замечательным ровно до тех пор, пока не столкнулся с необходимостью интеграции с Vuex :(

[Сергей Соколов]

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