Question

因此，我有一个带有表单的页面，用户可以在其中编辑其帐户信息（此处只是名称）。这个想法是用当前数据预填充表格。如果在通过登录屏幕之后到达页面，则可以使用store中的数据来预填写表单。但是，如果我直接访问该页面，则商店为空。因此，我尝试在created钩子中触发一个操作来填充store，然后使用这些数据。

<template>
  <div>
    <navbar></navbar>
    <div class="container">
      <div class="columns">
        <div class="column is-4 is-offset-4">
          <h1 class="title">Update information</h1>

          <div class="field">
            <label class="label is-medium">Name</label>
            <div class="control has-icons-left">
              <input class="input is-medium" type="text" v-model="name" placeholder="John">
              <span class="icon is-small is-left">
                <font-awesome-icon icon="user" />
              </span>
            </div>
          </div>

          <div class="control">
            <button class="button is-primary" v-bind:class="{ 'is-loading': isLoading }" @click="updateInfo">Update</button>
          </div>

          <transition name="fade">
            <div v-show="succesAlert" class="notification is-primary">
              The update is a success
            </div>
          </transition>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import firebase from 'firebase'
  import { mapState, mapActions } from 'vuex'

  import Navbar from '@/components/layout/Navbar'

  export default {
    name: 'profile',
    components: {
      Navbar
    },
    data() {
      return {
        name: '',
        isLoading: false,
        succesAlert: false,
      };
    },
    methods: {
      ...mapActions(['setUser', 'updateUser']),
      updateInfo: function() {
        this.isLoading = true;

        const user = {
          name: this.name
        }

        this.updateUser(user, firebase.auth().currentUser.uid).then(() => {
          this.isLoading = false;
          this.succesAlert = true;
          setTimeout(() => { this.succesAlert = false; }, 3000);
        });
      }
    },
    computed: {
      ...mapState(['userInfo'])
    },
    created: function() {
      if(typeof userInfo == 'undefined') {
        this.setUser(firebase.auth().currentUser.uid).then(() => {
          this.name = userInfo.name; //Where the error occurs 
        });
      } else {
        this.name = userInfo.name;
      }
    }
  }
</script>

但是，当我这样做时，我仍然遇到错误Unhandled promise rejection ReferenceError: "userInfo is not defined"。因此，我假设组件中store的状态未更新。但是我真的不知道如何解决。

Answer 1

这是因为您没有从诺言中得到任何回报。更改您的代码：

this.setUser(firebase.auth().currentUser.uid).then(res => {
  this.name = res.userInfo.name;
});

确保响应返回属性“ userInfo”。可能是res.data.userInfo或类似的内容。

您可以使用console.log

检查承诺是否正好返回

this.setUser(firebase.auth().currentUser.uid).then(res => {
  console.log(res) // check browser's console
  this.name = res.userInfo.name;
});

设置后立即使用Vuex数据

1 个答案: