Vuex Store Object Child 返回 undefined，parent 正确返回。为啥？

Posted 2023-02-22

【中文标题】Vuex Store Object Child 返回 undefined，parent 正确返回。为啥？

【英文标题】：Vuex Store Object Child returns undefined, parent returns properly. Why?Vuex Store Object Child 返回 undefined，parent 正确返回。为什么？

【发布时间】：2021-03-30 22:32:19

【问题描述】：

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

当我登录 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)
            
        ,

这是我的帐户模块中将用户绑定到 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 被注入到根组件中

【问题讨论】：

***.com/questions/61011168/…

这太棒了！似乎我的数据在我需要的时候还没有加载，看看我如何重构我的代码来解决这个问题并重新签入

道歉，如果这是一个愚蠢的问题，但你的意思不是在firebaseAction 之前添加return 吗？它返回一个错误，应该如何编辑这一行？ return bindFirebaseRef('user', db.ref('users').child(id))

【参考方案1】：

您的数据在console.log 之后出现。单击时，控制台会使用当前值更新对象/数组日志，但不能使用原语执行此操作。详情请参阅this answer。

awaitfirebaseAction应该够了：

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

【讨论】：

希望 firebase 不会对 firebaseAction 造成太大影响。我实际上并没有使用 firebase，所以我不知道它在做什么来确保它有效

更新了我的代码以在此处包含您的建议。 await 代码似乎不起作用。我添加了return bindFirebaseRef('user', db.ref('user').child(id)).then(() => console.log("account.bindCurrentUser() -- complete")) 并且从未打印过日志语句

我还确保声明 async bindCurrentUser() 以确保这不是问题

想通了！

好吧，这意味着 firebaseAction 返回一个函数而不是一个承诺（事后看来这是有道理的），这可以解释我的误解。不客气，很高兴你弄明白了