I've come across some similar inquiries, but none quite fit my specific scenario.
Upon logging this.$store.state.account, the expected results are displayed
{__ob__: Nt}
user: Object
favorites_playlist: (...)
firebaseID: (...)
spotifyID: (...)
However, when I try to
console.log(this.$store.state.account.user)user show up as undefined, despite being logged properly above
console.log(this.$store.state.account.user){__ob__: Nt}
__ob__: Nt {value: {…}, dep: vt, vmCount: 0}
__proto__: Object
This is the method within my component that calls upon 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 within my accounts module that links 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))
}),
}
No further information seems relevant other than the fact that this.$store.state.account.user is bound via Vuexfire to a database reference. The store is injected into the root component