Ошибка спама Vuex без явной причины в Commit - PullRequest
Новая
       17

Ошибка спама Vuex без явной причины в Commit

0 голосов
/ 10 июня 2019

В моем плагине у меня есть следующий код: 

import firebase from 'firebase'

export default context => {
  firebase.auth().onAuthStateChanged(userObject => {
    // eslint-disable-next-line no-console
    console.log({ userObject })
    context.store.commit('auth/setUser', { userObject })
  })
}

Здесь все хорошо, и userObject - правильная вещь. Сейчас в магазине: 

import Vue from 'vue'

export const state = () => ({
  user: null
})

export const mutations = {
  setUser(state, val) {
    // eslint-disable-next-line no-console
    console.log(val)
    Vue.set(state, 'user', val)
  }
}

Все становится странно, как только это вызывает, моя Консоль получает спам с Do not mutate vuex store state outisde mutation handlers, но я не вижу места, где я делаю это? Поиск в течение нескольких часов теперь расставляет вещи по местам, но не может устранить ошибку, спасибо заранее.

1 Ответ

2 голосов
/ 10 июня 2019

Это потому, что пользователь firebase может быть изменен самой firebase, поэтому вам нужно установить хранилище с клоном вашего userObject.Поскольку это, вероятно, вложенный объект, вы можете сделать глубокий клон, подобный этому: 

export default context => {
  firebase.auth().onAuthStateChanged(userObject => {
    // eslint-disable-next-line no-console
    let userOb = JSON.parse(JSON.stringify(userObject))
    console.log({ userOb })
    context.store.commit('auth/setUser', { userOb })
  })
}

Также вы неправильно используете Vue.set.Чтобы установить объект, он должен выглядеть следующим образом: 

Vue.set(state.user, key, value)

, но я не думаю, что вам нужен набор vue, вы можете просто назначить его: 

export const mutations = {
  setUser(state, val) {
    state.user = val
  }
}

, но еслиэто портит реактивность, я инициализирую пользователя как массив и устанавливаю его так: 

export const state = () => ({
  user: []
})

export const mutations = {
  setUser(state, val) {
    // eslint-disable-next-line no-console
    console.log(val)
    Vue.set(state.user, 0, val)
  }
}
...