javascript - Vuex Store 对象 Child 返回 undefined，parent 正确返回。为什么？

Question

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

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

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

但是，当我 console.log(this.$store.state.account.user) 时，用户对象消失了! user 中的所有嵌套属性都返回 undefined，尽管它们在上面记录得很好

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

这是我的帐户模块中将用户绑定(bind)到 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 绑定(bind)到数据库引用之外，不确定还有哪些相关信息。 store 被注入(inject)到根组件中

Answer 1

您的数据在 console.log 之后进入。当您单击时，控制台会使用当前值更新对象/数组日志，但不能使用原语执行此操作。参见 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)})
}),