Wait for mapped store getter to update child property

Question

I have the following vuex getters

import { isEmpty } from 'lodash'

// if has token, we assume that user is logged in our system
export const isLogged = ({ token }) => !isEmpty(token)
// get current user data
export const currentUser = ({ user }) => user
export const timeLimit = ({ token_ttl }) => token_ttl
export const getToken = ({ token }) => token

I have the following computed Vuex properties in a child component

 name: "ProfilePic",
  computed: {
    ...mapGetters(['currentUser']),
    url() {
      return new String('').concat(window.location.protocol, '//', window.location.hostname , ':8000', '/games/create/?search=player_id:').valueOf()
    }
  },
  mounted(){
    console.log(this.currentUser)
  },
  watch: {
    currentUser(value, old){
      console.re.log('ok', value, old);
      new QRCode(document.querySelector(".profile-userpic"), {
        text: this.url + value,
        width: 128,
        height: 128,
        colorDark : "#000000",
        colorLight : "#ffffff",
        correctLevel : QRCode.CorrectLevel.H
      })
    }
  }

the parent

 import ProfilePic from '../../components/general/qrcode.vue'

 export default {
    name: 'CcDashboard',
    methods : {
      ...mapActions(['checkUserToken', 'setMessage'])
    },
    computed: {
      ...mapGetters(['isLogged'])
    },
    mounted() {
      this.checkUserToken().then(tkn => this.$store.dispatch('setMessage', {type: 'success', message: 'Your Game Starts Now!!!!'})).catch(err =>  this.$store.dispatch('setMessage', {type: 'error', message: ['Your time is up!']}))
    },
    components: {
      'profile-pic': ProfilePic
    }
  }

Store

Vue.use(Vuex)

export default new Vuex.Store({
  state,
  mutations,
  actions,
  modules,
  plugins,
  getters,
  strict: false, //process.env.NODE_ENV !== 'production',
})

I'm using VuexPersist with localforage

localforage.config({
  name: 'vuevue'
});

const vuexLocalStorage = new VuexPersist({
  key: 'vuex', // The key to store the state on in the storage provider.
  storage: localforage, // or window.sessionStorage or localForage
  // Function that passes the state and returns the state with only the objects you want to store.
  // reducer: state => ({ Collect: state.Collect, Auth: state.Auth}),
  // Function that passes a mutation and lets you decide if it should update the state in localStorage.
  // filter: mutation => (true)
  modules: ['Auth','Collect'],
  asyncStorage: true
})
export const RESTORE_MUTATION = vuexLocalStorage.RESTORE_MUTATION
// // create a new object and preserv original keys
export default [...app.plugins, vuexLocalStorage.plugin]

executing console.log on mounted() I get

{__ob__: Observer}current_points: 45email: "[email protected]"id: 2name: "Sandrine Cruickshank"total_points: 45__ob__: Observerdep: Dep {id: 20, subs: Array(4)}value: {id: 2, name: "Sandrine Cruickshank", email: "[email protected]", current_points: 45, total_points: 45, …}

However,

When running the logic the this.currentUser.id returns undefined rather than a value( which it does)

Is it that I need to "wait" for it to properly populate from the store? or do I need to call it from the $store.dispatch() ?

Answer 1

Figured it out and had to do with a bug with one of my packagesenter link description here