When trying to watch for a state change it does not get caught using Vuex in Nuxtjs

0
votes

I am working on a music app. On logout the music still keeps playing. So I tried using Vuex to have a global boolean state of: logged (in or out)... and by that - try to catch the updated state. If the state is loggedOut - the music stops playing. The music is being played from another component - MusicPlayer.vue. My question: When i am trying to watch for a state change, the change does not get caught, therefore the music still keeps playing. What am I doing wrong?

  computed: {
    loggetOUT () {
      return this.$store.login.getters.loggetState
    }
  },
  watch: {
    loggedOUT (value) {
      console.log(value)
      if (value) {
        sound.pause()
        sound = null
      }
    }
  }

store/login.js:

export const state = () => ({
  logged: false
})

export const mutations = {
  LOGGED_IN (state) {
    state.logged = true
  },
  LOGGED_OUT (state) {
    state.logged = false
  }
}

export const getters = {
  loggedState (state) {
    return state.logged
  }
}

I set the state to false on logout in my default template:

logout (store) {
  this.$auth.logout()
  this.$store.commit('login/LOGGED_OUT')
}
1
vue.jsvuexnuxt.js

1 Answers

0
votes

Try to use this.$store.getters['login/loggedState'] or maybe you are trying to access a getter that doesn't exist (loggetState instead of loggedState).

The rest of the code sounds good to me