Question

我的setUser

setUser(state, payload) {
   state.user = {...payload}
}

setUser中用于随机数据的有效载荷是

用户=== 有效载荷{ “UID”： “pQOQL9AqMHNsozDE2EFGbMfHZlt1”， “refreshToken”： “AEu4IL3c4doh1ON1ywqNEIXPjijktxAyQsYusC5twuvM61bHK6PpLHENyqKRKGCvNPR5IxBRC7JLQhkjv1qqiVUPdatRVM2Q8VdBCnvxyKkBjOEt_kM6bHCiJI6cdESdmFWZf2B7EjG9MwUJ7l8ASOpdbQLLVs9NtuW94dpNg1dkQShtUXB-sVCafvgtSnluGyZSWGhkt8uJ”， “的 photoURL ”：空下， “的显示名” ：空，“电子邮件”：“ 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更新然后再次连接该数据库，以创建与该用户相关的profilesinfo，这将显示该用户已经注册了哪些聚会组

在setUser中设置有效载荷的值时，它会起作用，并且setURL和photoURL和displayName将被正确填充，并且可以在个人资料vue组件中使用它

我调试了控制台内的所有内容，但我不明白为什么这部分不能正确传递photoURL和displayName

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

注意：重新加载并访问了其他页面并返回到个人资料页面后，显示了照片，我想该信息是否可用？

我的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

如果需要更多信息，请告诉我谢谢

Answer 1

我看到setUser()中传递了一些不同的参数

在您的signUserUp(context, payload)中：

...
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("/");
...

您还说过：

当在我的setUser中，我在setUser中设置有效负载的值时，它起作用并且photoURL和displayName将被正确填充，我可以使用它在我的个人资料vue组件中

是否表示您将其放在/store/index.js中？

setUser(state, payload) {
  const {uid, refreshToken, photoURL, displayName, email} = payload;
  console.log('user === payload' + JSON.stringify(payload))
  console.log('payload detail info ' + payload.uid + " " + payload.refreshToken 
                           + " " + payload.photoURL + " " + payload.displayName + " " + payload.email )
  // payload = {
  //   displayName:"test7",
  //   email:"test7@test.com",
  //   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",
  //   refreshToken:"AEu4IL0tC9-fuEO-KZNwq953YDo2V7FBpjqB62FT6nXJ5d3r5u3Fzk1RYDzbjkO885rz0LrLyvIjHKHIDemiZsVPeio5XPXK5ntuRyFtLYcu-QOV4xnYYMn18mFxjo6P_TeqrnGIBuwpoto0ceTPxNfYFmedNyuxbNIU6MUVRp5WvnI7OWxVO5404RHIsnLrBsABoigDZgxs",
  //   uid:"XAhAqlBbs5VZCredSDqdWqKze6C3",
  // }
  state.user = {...{uid, refreshToken, photoURL, displayName, email}}

那么，如果您取消注释该行，它将起作用吗？

尝试通过同一键传递所有使用的参数：

...
context.commit("setUser", { 
      uid: data.user.uid,  // id => uid,
      displayName: payload.name ,  // name=> displayName
      refreshToken: 'your-token',
      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("/");
...

可以吗？

Vuex photoURL和displayName已传递null到SetUser

1 个答案: