Vuex Store Object Child returns undefined, parent returns properly. Why?

I’ve seen some similar questions but they don’t seem to match my situation.

When I log this.$store.state.account I get the expected result

    {__ob__: Nt}
       user: Object
          favorites_playlist: (...)
          firebaseID: (...)
          spotifyID: (...)

However, when I console.log(this.$store.state.account.user) the user object disappears! All of the nested properties inside user return undefined though they log perfectly fine above

console.log(this.$store.state.account.user)

{__ob__: Nt}
   __ob__: Nt {value: {…}, dep: vt, vmCount: 0}
   __proto__: Object

This is the method inside my component calling the object

        async connectToSpotify() {
            console.log("User Profile: ", this.user)
            var firebaseID = await this.$store.dispatch("signInToFirebase")
  
            var authID = await this.$store.dispatch('connectToSpotify')
            Vue.set(this.$store.state.spotify, "authId", authID)

            var userProfile = await this.$store.dispatch("fetchUserDataFromSpotify", authID)
            userProfile["firebaseID"] = firebaseID

    
            this.$store.dispatch("bindCurrentUser", userProfile.spotifyID)

            console.log("this.$store.state")
            console.log(this.$store.state);
            console.log("this.$store.state.account")
            console.log(this.$store.state.account);
            console.log("this.$store.state.account.user")
            console.log(this.$store.state.account.user);
            console.log("this.$store.state.account.user.favorites_playlist")
            console.log(this.$store.state.account.user.favorites_playlist);
            // console.log(this.$store.state.account.user.firebaseID);
             var favorites_playlist = this.$store.state.account.user.favorites_playlist


            var playlistID = await this.$store.dispatch("createFavoritesPlaylist", [authID, userProfile.spotifyID, favorites_playlist])
            console.log(`PlaylistID: ${playlistID}`);

            userProfile["favorites_playlist"] = playlistID
            console.log(this.$store);
            return db.ref(`users/${userProfile.spotifyID}`).update(userProfile)
            
        },

this is the action inside my accounts module that binds the user to firebase

const state = () => ({
    //user: { voted_tracks: {}, favorited_tracks: {}, favorites_playlist: null, authID: null}
    user: {},
})
const actions = {
    bindCurrentUser: firebaseAction(({ bindFirebaseRef }, id) => {
      return bindFirebaseRef('user', db.ref('users').child(id))
    }),
}

Not sure what further information would be relevant aside that this.$store.state.account.user is binded via Vuexfire to a database reference. The store is injected into the root component

Answer

Your data comes in after the console.log. The console updates object/array logs with current values when you click, but can’t do that with primitives. See this answer for more detail.

It should be enough to await the firebaseAction:

await this.$store.dispatch("bindCurrentUser", userProfile.spotifyID)

bindCurrentUser: firebaseAction(({ bindFirebaseRef }, id) => {
   console.log("account.bindCurrentUser() called");
   return bindFirebaseRef('user', db.ref(`users/${id}`)).then(() => {
       console.log("account.bindCurrentUser() -- complete")
   }).catch((err) => {console.log(err)})
}),

Advertisement

Answer