Repository nuxt.js

Computed property not updated when state updated.

us-22
0
us-22
commented 10 months ago

Hi

I took enough time searching for a solution for this issue. but with no luck. I read many article/blogs/issues but still cannot resolve my issue. Maybe I don't get it right. I need your help.

Inside user profile page there is avatar component which have computed property named 'avatar ' should hold user avatar path. This property is mapped to Vuex store getter. Whenever the state change (avatar changed/updated by user) property should reflect that change.

On the other hand. i'm using 'js-cookie' to handle user data/token. Once user login the cookie is set with user data/token information which include user avatar path. If user revisit website after for example two days. Application will extract data from cookies.

Now the issue happen when i retrive data from cookie. the avatar computed property never updated.

layout/default.vue

if(Cookies.get('wd_cookie') != undefined){
      let user = JSON.parse(Cookies.get('wd_cookie'));
      this.$store.commit('logUserIn', user);
    }

store/index.js

export const mutations = {
logUserIn(state, user){
      state.userLoggedIn = true;
      Vue.set(state, 'user', {
        id: user.id,
        email: user.email,
        name: user.name,
        avatar: user.avatar,
      });
}
}

export const getters = {
  userAvatar: state => {
    if(state.user.avatar != null){
      return state.user.avatar;
    }
    return '/avatar-placeholder.png';
  }
}

my component avatar.vue

<script>
export default {
  computed: {
    avatar(){
      return this.$store.getters.userAvatar;
    }
  }
}
</script>

Any help please

0
neonerd
25
neonerd
commented 10 months ago

What does your default state function look like?

If the "user" property on state is already declared, this should work:

state.user = Object.assign({}, {id: user.id, ...})

0
zacharynevin
0
zacharynevin
commented 6 months ago

+1. I'm having this exact issue

0
zacharynevin
0
zacharynevin
commented 6 months ago

Nevermind, I fixed my issue by making sure that I am returning a promise in my Nuxt plugin that handles firebase authentication:

Before

// plugins/firebase-auth.js

import firebaseConfig from '~/firebase-config'
import firebase from 'firebase/app'
import 'firebase/auth'

export default ({ store }, inject) => {
  if (!firebase.apps.length) {
    firebase.initializeApp(firebaseConfig)
  }

  firebase.auth().onAuthStateChanged((user) => {
      if (user) {
        store.dispatch('setCurrentUser', user)
      }
  })
}

After

// plugins/firebase-auth.js

import firebaseConfig from '~/firebase-config'
import firebase from 'firebase/app'
import 'firebase/auth'

export default ({ store }, inject) => {
  if (!firebase.apps.length) {
    firebase.initializeApp(firebaseConfig)
  }

  return new Promise((resolve, reject) => {
    firebase.auth().onAuthStateChanged((user) => {
      if (user) {
        store.dispatch('setCurrentUser', user)
      }

      resolve()
    })
  })
}
0
galvez
2.8k
galvez
commented 3 months ago

@us-22 Closing this as there's been no updates for over 90 days.

This seems to be a logic problem rather than a Nuxt problem. Please take the issue to our Discord community if you're still having problems.

0
Informations
QuestionUnresolved
#c2189 - Created 10 months ago