CODEWITHSUNDEEP
javascriptvue.jsvuexnuxt.js
niclas_4
niclas_4

Reputation: 3674

Vuex spams Error for no obvious reason on Commit

In my Plugin I have the following Code:

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 })
  })
}

Here all is fine and the userObject is the correct thing. Now in the store:

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)
  }
}

Things get weird, once this triggers my Console gets spammed with Do not mutate vuex store state outisde mutation handlers but I do not see any place in where I do that? Searching for hours now placing stuff around but can´t solve the error, thanks in advance.

Upvotes: 0

Views: 35

Answers (1)

Andrew1325
Andrew1325

Reputation: 3579

It is because the firebase user can be changed by firebase itself so you need to set the store with a clone of your userObject. Because it is probably a nested object you can make a deep clone like this:

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 })
  })
}

Also you aren't using Vue.set correctly. To set an object it should be like this:

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

but I don't think you need vue set, you should be able to just assign it:

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

but if this messes up reactivity I'd initialise user as an array and set it like this:

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)
  }
}

Upvotes: 2

Related Questions