Vuex 存储对象子 returns 未定义，父 returns 正确。为什么？

Question

我看过一些类似的问题，但它们似乎与我的情况不符。

当我登录 this.$store.state.account 时，我得到了预期的结果


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

然而，当我console.log(this.$store.state.account.user)用户对象消失了！ user return 中的所有嵌套属性都未定义，尽管它们在上面

上记录得很好

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

{__ob__: Nt}
   __ob__: Nt {value: {…}, dep: vt, vmCount: 0}
   __proto__: 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)
            
        },

这是我的帐户模块中将用户绑定到 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))
    }),
}

除了 this.$store.state.account.user 通过 Vuexfire 绑定到数据库引用之外，不确定还有哪些相关信息。 store 被注入根组件

Answer 1

您的数据在 console.log 之后进入。当您单击时，控制台会使用当前值更新 object/array 日志，但不能使用原语执行此操作。有关详细信息，请参阅 this answer。

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

Vuex 存储对象子 returns 未定义，父 returns 正确。为什么？

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

javascript

firebase

vue.js

firebase-realtime-database

vuex