Использование данных Vuex сразу после их настройки

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