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

Question

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

This is awesome! seems like my data wasn't loaded by the time I needed it, will see how I can refactor my code to account for this and check back in — degenPenguin
– degenPenguin, Commented Dec 21, 2020 at 5:59
Apologies if this is a dumb question but you don't mean literally add return before firebaseAction do you? it returns an error, how should this line be edited? return bindFirebaseRef('user', db.ref('users').child(id)) — degenPenguin
– degenPenguin, Commented Dec 21, 2020 at 6:19

Dan · Accepted Answer · 2020-12-21 07:07:06Z

1

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

edited Dec 21, 2020 at 7:07

answered Dec 21, 2020 at 6:25

Dan

63.5k18 gold badges113 silver badges122 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Dan Over a year ago

Hopefully firebase isn't doing too much magic with firebaseAction. I don't actually use firebase so I don't know what it's doing to be sure that this works

degenPenguin Over a year ago

Updated my code to include your recommendations here. It doesn't seem like the the await code is working. I added

return bindFirebaseRef('user', db.ref('user').child(id)).then(() => console.log("account.bindCurrentUser() -- complete"))

and the log statement is never printed

degenPenguin Over a year ago

I also made sure to declare async bindCurrentUser() to make sure that wasn't the issue

degenPenguin Over a year ago

Figured it out!

Dan Over a year ago

Ok that means firebaseAction returns a function and not a promise (which makes sense in hindsight), that would explain my misconception. You're welcome, glad you got it figured out

|

Collectives™ on Stack Overflow

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

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related