My setUser
setUser(state, payload) {
state.user = {...payload}
}
моя полезная нагрузка в setUser для случайных данных равна
user === payload {"uid": "pQOQL9AqMHNsozDE2EFGbMfHZlt1", "refreshToken": " AEu4IL3c4doh1ON1ywqNEIXPjijktxAyQsYusC5twuvM61bHK6PpLHENyqKRKGCvNPR5IxBRC7JLQhkjv1qqiVUPdatRVM2Q8VdBCnvxyKkBjOEt_kM6bHCiJI6cdESdmFWZf2B7EjG9MwUJ7l8ASOpdbQLLVs9NtuW94dpNg1dkQShtUXB-sVCafvgtSnluGyZSWGhkt8uJ», " photoURL ": пустой , " DISPLAYNAME ": нулевой , "электронная почта": "yyy@test.com" }
Мой signUserUp
signUserUp(context, payload) {
//name , email , and password are in payload
context.commit("setLoading", true);
context.commit("clearError");
context.commit("setUserAvatar")
firebase
.auth()
.createUserWithEmailAndPassword(payload.email, payload.password)
.then((data) => {
data.user.updateProfile({
displayName: payload.name ,
photoURL: 'https://avataaars.io/?avatarStyle=Circle&topType=ShortHairDreads01&accessoriesType=Prescription01&hairColor=BlondeGolden&facialHairType=BeardMedium&facialHairColor=BrownDark&clotheType=Hoodie&clotheColor=Gray01&eyeType=Squint&eyebrowType=AngryNatural&mouthType=Sad&skinColor=Light'
})
return data
})
.then((data) => {
context.commit("setLoading", false);
db.collection("profilesInfo")
.add({
id: data.user.uid,
registeredMeetups: []
})
.then(function() {
context.commit("setProfilesInfo",
{
id: data.user.uid,
registeredMeetups: []
}
)
console.log("Document successfully written!");
})
.catch(function(error) {
console.error("Error writing document: ", error);
});
context.commit("setUser", {
name: payload.name ,
id: data.user.uid,
photoURL: 'https://avataaars.io/?avatarStyle=Circle&topType=ShortHairDreads01&accessoriesType=Prescription01&hairColor=BlondeGolden&facialHairType=BeardMedium&facialHairColor=BrownDark&clotheType=Hoodie&clotheColor=Gray01&eyeType=Squint&eyebrowType=AngryNatural&mouthType=Sad&skinColor=Light',
email: data.user.email
})
router.push("/");
})
.catch(function(error) {
// Handle Errors here.
context.commit("setLoading", false);
context.commit("setError", error);
});
},
В signUserUp
будет создан пользователь, и после создания значения photoURL и displayName будут обновлены updateProfile и после этого db снова подключен для создания информации о профиле, связанной с пользователем, которая показывает, какие группы собраний уже зарегистрированы пользователем
Это работает, когда в моем setUser я устанавливаю значение полезной нагрузки внутри setUser и photoURL и displayName будет быть заполненным правильно, и я могу использовать его в своем профиле vue компонент ent
Я отладил все внутри консоли, и я не могу понять, почему эта часть не передает photoURL и displayName right
context.commit("setUser", {
name: payload.name ,
id: data.user.uid,
photoURL: 'https://avataaars.io/?avatarStyle=Circle&topType=ShortHairDreads01&accessoriesType=Prescription01&hairColor=BlondeGolden&facialHairType=BeardMedium&facialHairColor=BrownDark&clotheType=Hoodie&clotheColor=Gray01&eyeType=Squint&eyebrowType=AngryNatural&mouthType=Sad&skinColor=Light',
email: data.user.email
})
Примечание. Я очень часто очищал хранилище
Или, подумав, может ли моя проблема быть связана с использованием постоянных данных?
const vuexLocalStorage = new VuexPersist({
key: 'devmeetup-it', // The key to store the state on in the storage provider.
storage: window.localStorage, // or window.sessionStorage or localForage
// Function that passes the state and returns the state with only the objects you want to store.
// reducer: state => ({
// keepLoadedMeetups : store.getters.loadedMeetups,
// keepUser: store.getters.user,
// keepProfilesInfo: state.profilesInfo
// // getRidOfThisModule: state.getRidOfThisModule (No one likes it.)
// })
// Function that passes a mutation and lets you decide if it should update the state in localStorage.
// filter: mutation => (true)
})
Примечание: после перезагрузки и посещения других страниц и возврата на страницу профиля отображается фотография. ?
My Profile.vue
<template >
<div>
<v-card
class="mx-auto"
max-width="434"
tile
>
<v-img
height="100%"
src="https://cdn.vuetifyjs.com/images/cards/server-room.jpg"
>
<v-row
align="end"
class="fill-height"
>
<v-col
align-self="start"
class="pa-0"
cols="12"
>
<v-avatar
class="profile"
size="164"
tile
>
<img :src="imgUrl" alt="">
</v-avatar>
</v-col>
<v-col class="py-0">
<v-list-item
color="rgba(0, 0, 0, .4)"
dark
>
<v-list-item-content>
<v-list-item-title class="title">Name: {{owner_name}}</v-list-item-title>
<v-list-item-subtitle>Email: {{user_info.email}}</v-list-item-subtitle>
<template v-if="meetups.length> 0 ">
<v-list-item-subtitle>Meetup organizer :</v-list-item-subtitle>
<v-card color="rgba(255, 0, 0, 0.5)">
<ol start="1" v-for="(meetup,i) in meetups" v-bind:key="i">
<span >{{i+1}}. {{meetup.title}}</span>
</ol>
</v-card>
</template>
<template>
<div v-if="registeredMeetups.length> 0 ">
<v-list-item-subtitle>Meetup Registred :</v-list-item-subtitle>
<v-card color="rgba(255, 0, 0, 0.5)">
<ol start="1" v-for="(meetup,i) in registeredMeetups" v-bind:key="i">
<span >{{i+1}}. {{meetup.title}}</span>
</ol>
</v-card>
</div>
</template>
</v-list-item-content>
</v-list-item>
</v-col>
</v-row>
</v-img>
</v-card>
<!--<h3>orginzer meetups: {{this.meetups}}</h3>
<h3>registered meetups: {{this.registeredMeetups}}</h3>
<h3>All the meetups: {{this.$store.getters.loadedMeetups}} </h3>
<div style="word-wrap: break-word"> {{imgUrl}} </div>-->
</div>
</template>
<script>
import {mapState} from 'vuex'
export default {
data(){
return {
imgUrl: this.$store.state.user.photoURL
}
},
created(){
// this.$store.subscribe((mutation, state) => {
// if (mutation.type === "setUserAvatar") {
// //debugger; // eslint-disable-line no-debugger
// this.imgUrl = state.user.photoURL
// }
// });
},
computed: {
...mapState({
owner_name: state => state.user.displayName,
user_info: state => state.user
}),
registeredMeetups(){
let rm= this.$store.getters.currentUserProfileInfo.registeredMeetups
let allm = this.$store.getters.loadedMeetups
let meetupsInfo = []
let i , j
console.log("rm and all meetups are " + JSON.stringify(allm))
for (i = 0; i < rm.length; i++) {
console.log("rm=" + rm[i].toString() )
for ( j = 0 ; j < allm.length; j++){
console.log("lm= " + JSON.stringify(allm[j]))
if(allm[j].id == rm[i].toString())
meetupsInfo.push(allm[j])
}
}
console.log("meetupsInfo " + JSON.stringify(this.$store.state.photoURL))
return meetupsInfo
},
meetups(){
return this.$store.getters.loadedMeetups
.filter( meetup => meetup.creatorId === this.$store.getters.user.uid )
},
profilesInfo(){
// let currentUserProfile = this.$store.state.profilesInfo
// .find( userProfile =>
// userProfile.id === this.$store.getters.user.uid )
return this.$store.getters.currentUserProfileInfo
}
}
}
</script>
или Может быть , использование оператора then внутри другого предложения будет иметь другой эффект? пожалуйста, посмотрите на мои signUserUp затем пункты.
мое репозиторий github github.com/KickButtowski80/devmeetup/tree/setting-avataaars
пожалуйста, если потребуется дополнительная информация, дайте мне знать спасибо вы