Я видел несколько подобных вопросов, но они, похоже, не соответствуют моей ситуации.
Когда я захожу 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 к ссылке на базу данных. Хранилище внедряется в корневой компонент
Это круто! похоже, что мои данные не были загружены к тому времени, когда они мне понадобились, посмотрю, как я могу реорганизовать свой код, чтобы учесть это, и вернусь
Извините, если это глупый вопрос, но вы не имеете в виду буквально добавить return
перед firebaseAction
, не так ли? выдает ошибку, как эту строку редактировать? return bindFirebaseRef('user', db.ref('users').child(id))
Ваши данные идут после console.info
. Консоль обновляет журналы объектов/массивов текущими значениями при нажатии, но не может сделать это с примитивами. Смотрите этот ответ для более подробной информации.
Этого должно быть достаточно, чтобы await
firebaseAction
:
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, поэтому я не знаю, что он делает, чтобы убедиться, что это работает.
Обновлен мой код, чтобы включить ваши рекомендации здесь. Код await
не работает. Я добавил return bindFirebaseRef('user', db.ref('user').child(id)).then(() => console.info("account.bindCurrentUser() -- complete"))
, и оператор журнала никогда не печатается
Я также позаботился о том, чтобы объявить async bindCurrentUser()
, чтобы убедиться, что проблема не в этом.
Догадаться!
Удалось ли вам await
правильно использовать firebaseAction
прямо так?
Функция должна быть объявлена как bindCurrentUser: firebaseAction(({ bindFirebaseRef }, id) => {
, а вы возвращаете bindFirebaseRef
. Я попытался отредактировать ваш ответ, чтобы показать, как должна выглядеть функция, но да, когда я написал правильно, я смог дождаться!
Хорошо, это означает, что firebaseAction
возвращает функцию, а не обещание (что имеет смысл в ретроспективе), что объясняет мое неправильное представление. Пожалуйста, рад, что вы поняли это