Установка firebase.User в vuex приводит к вечному циклу

ОБНОВЛЕНИЕ: эта ошибка возникает только при включенном строгом режиме vuex.

Я создаю приложение Vue с аутентификацией Firebase, но приложение завершается со следующими сообщениями об ошибках:

[Vue warn]: Error in callback for watcher "function () { return this._data.$$state }": "Error: [vuex] Do not mutate vuex store state outside mutation handlers."

Error: [vuex] Do not mutate vuex store state outside mutation handlers.

Uncaught RangeError: Maximum call stack size exceeded

Ошибка возникает, когда я фиксирую пользователя в моем хранилище Vuex в моем файле main.ts:

firebase.auth().onAuthStateChanged(user => {
  if (user) {
    store.commit(constants.auth.SET_USER, user) // THIS LINE
    store.commit(constants.auth.SET_AUTHENTICATED, true)
    router.push('/')
  } else {
    store.commit(constants.auth.SET_USER, null)
    store.commit(constants.auth.SET_AUTHENTICATED, false)
    router.push('/signup')
  }
  if (!app) {
    app = new Vue({
      router,
      store,
      render: (h) => h(App),
    }).$mount('#app')
  }
})

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

[constants.auth.SET_USER](state: AuthState, payload: firebase.User): void {
      state.user = payload
}

Из Vue devtools я могу сказать, что мутация действительно происходит и что пользователь фиксируется в магазине, но я понятия не имею, почему возникает эта ошибка. Вы можете помочь мне?

Я пытался закомментировать почти все остальное в приложении, и это единственные части, которые вызывают какие-либо проблемы.

Вы видели этот пост: forum.quasar-framework.org/topic/546/…

Renaud Tarnec 18.03.2019 21:12

Да, но я не использую v-модель, поэтому не думаю, что это мне поможет. У вас есть идея, как это можно использовать в моей ситуации?

Simon Hammerholt Madsen 18.03.2019 21:59
Зод: сила проверки и преобразования данных
Зод: сила проверки и преобразования данных
Сегодня я хочу познакомить вас с библиотекой Zod и раскрыть некоторые ее особенности, например, возможности валидации и трансформации данных, а также...
Как заставить Remix работать с Mantine и Cloudflare Pages/Workers
Как заставить Remix работать с Mantine и Cloudflare Pages/Workers
Мне нравится библиотека Mantine Component , но заставить ее работать без проблем с Remix бывает непросто.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
TypeScript против JavaScript
TypeScript против JavaScript
TypeScript vs JavaScript - в чем различия и какой из них выбрать?
Синхронизация localStorage в масштабах всего приложения с помощью пользовательского реактивного хука useLocalStorage
Синхронизация localStorage в масштабах всего приложения с помощью пользовательского реактивного хука useLocalStorage
Не все нужно хранить на стороне сервера. Иногда все, что вам нужно, это постоянное хранилище на стороне клиента для хранения уникальных для клиента...
Что такое ленивая загрузка в Angular и как ее применять
Что такое ленивая загрузка в Angular и как ее применять
Ленивая загрузка - это техника, используемая в Angular для повышения производительности приложения путем загрузки модулей только тогда, когда они...
1
2
542
2

Ответы 2

хранить user.toJSON() в вашем штате. Пользователь firebase — это сложный объект, который не должен храниться в состоянии vuex.

Я думаю, вам может понадобиться обернуть firebase.auth().onAuthStateChanged в new Promise.

Посмотрите на этот пример: https://forum.vuejs.org/t/vue-routes-firebase-auth-sync-problem/4470#post2

Другие вопросы по теме