Дочерний объект хранилища Vuex возвращает значение undefined, родительский объект возвращается правильно. Почему?

Я видел несколько подобных вопросов, но они, похоже, не соответствуют моей ситуации.

Когда я захожу this.$store.state.account я получаю ожидаемый результат


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

Однако, когда я console.info(this.$store.state.account.user), объект пользователя исчезает! Все вложенные свойства внутри user возвращают значение undefined, хотя выше они регистрируются отлично.

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

{__ob__: Nt}
   __ob__: Nt {value: {…}, dep: vt, vmCount: 0}
   __proto__: Object

Это метод внутри моего компонента, вызывающий объект

        async connectToSpotify() {
            console.info("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.info("this.$store.state")
            console.info(this.$store.state);
            console.info("this.$store.state.account")
            console.info(this.$store.state.account);
            console.info("this.$store.state.account.user")
            console.info(this.$store.state.account.user);
            console.info("this.$store.state.account.user.favorites_playlist")
            console.info(this.$store.state.account.user.favorites_playlist);
            // console.info(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.info(`PlaylistID: ${playlistID}`);

            userProfile["favorites_playlist"] = playlistID
            console.info(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 к ссылке на базу данных. Хранилище внедряется в корневой компонент

Это круто! похоже, что мои данные не были загружены к тому времени, когда они мне понадобились, посмотрю, как я могу реорганизовать свой код, чтобы учесть это, и вернусь

degenPenguin 21.12.2020 06:59

Извините, если это глупый вопрос, но вы не имеете в виду буквально добавить return перед firebaseAction, не так ли? выдает ошибку, как эту строку редактировать? return bindFirebaseRef('user', db.ref('users').child(id))

degenPenguin 21.12.2020 07:19
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
3
3
177
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Ваши данные идут после console.info. Консоль обновляет журналы объектов/массивов текущими значениями при нажатии, но не может сделать это с примитивами. Смотрите этот ответ для более подробной информации.

Этого должно быть достаточно, чтобы awaitfirebaseAction:

await this.$store.dispatch("bindCurrentUser", userProfile.spotifyID)
bindCurrentUser: firebaseAction(({ bindFirebaseRef }, id) => {
   console.info("account.bindCurrentUser() called");
   return bindFirebaseRef('user', db.ref(`users/${id}`)).then(() => {
       console.info("account.bindCurrentUser() -- complete")
   }).catch((err) => {console.info(err)})
}),

Надеюсь, firebase не творит слишком много волшебства с firebaseAction. На самом деле я не использую firebase, поэтому я не знаю, что он делает, чтобы убедиться, что это работает.

Dan 21.12.2020 07:32

Обновлен мой код, чтобы включить ваши рекомендации здесь. Код await не работает. Я добавил return bindFirebaseRef('user', db.ref('user').child(id)).then(() => console.info("account.bindCurrentUser() -- complete")), и оператор журнала никогда не печатается

degenPenguin 21.12.2020 07:39

Я также позаботился о том, чтобы объявить async bindCurrentUser(), чтобы убедиться, что проблема не в этом.

degenPenguin 21.12.2020 07:41

Догадаться!

degenPenguin 21.12.2020 07:53

Удалось ли вам await правильно использовать firebaseAction прямо так?

Dan 21.12.2020 07:56

Функция должна быть объявлена ​​как bindCurrentUser: firebaseAction(({ bindFirebaseRef }, id) => {, а вы возвращаете bindFirebaseRef. Я попытался отредактировать ваш ответ, чтобы показать, как должна выглядеть функция, но да, когда я написал правильно, я смог дождаться!

degenPenguin 21.12.2020 07:59

Хорошо, это означает, что firebaseAction возвращает функцию, а не обещание (что имеет смысл в ретроспективе), что объясняет мое неправильное представление. Пожалуйста, рад, что вы поняли это

Dan 21.12.2020 08:05

Другие вопросы по теме