Vue, Vuex и Firestore: Как отобразить полученные данные Firestore на интерфейсе и сделать их реактивными?

# #firebase #vue.js #google-cloud-firestore #vuex

Вопрос:

У меня возникли некоторые проблемы при попытке отобразить данные из Firestore. Данные правильно привязаны к моему магазину, но не отображаются на веб-странице. Я полагаю, что моя проблема связана с предостережениями Vue о реактивности. Поскольку я довольно новичок в Vue, я не уверен в том, как бы я обошел предостережения, чтобы сделать мои данные реактивными. Вот ссылка на скриншот с тем, что я вижу на веб-странице, мой компонент панели мониторинга, в котором я пытаюсь отобразить данные, и мой index.js файл для моего магазина.

Версии Vue, Vuex и Vuexfire, используемые в этом проекте:
«vue»: «^3.0.0», «vuex»: «^4.0.2», «vuexfire»: «^3.2.5»

Комментарии:

1. Я обновил вопрос, чтобы добавить версию Vue, Vuex и Vuexfire, так как я понял, что моя проблема заключалась в несовместимости Vuexfire, не поддерживающей Vuex 4. В итоге возникла проблема зависимости, а не проблема с кодом.

Ответ №1:

После дополнительных исследований и помощи пользователя на другом форуме мы выяснили, что проблема заключалась в том, что Vuexfire еще не поддерживает Vuex 4. Я настраиваю моментальные снимки, используя документацию Firebase, чтобы установить состояние в моем хранилище Vuex. Эти снимки заполняют хранилище и обновляются на интерфейсе. Если кто-нибудь наткнется на это и у него возникнут какие-либо вопросы, не стесняйтесь комментировать, и я могу попытаться помочь!