Загрузить текущего пользователя с помощью Vue / Axios в Laravel

Question

Хорошо, я пытаюсь найти лучший способ загрузить текущего пользователя в мое приложение vue, чтобы я мог получить имя пользователя и идентификатор из любого другого компонента или маршрута.

Сейчас я попробовалthis:

app.js

new Vue({

el: '#app',

computed: {
    user(data) {
        return new Promise((resolve, reject) => {
            axios.get('/current-user')
                .then(response => {
                    resolve(response.data);

                    console.log(response.data);
                })
                .catch(error => {
                    reject(error.response.data);
                });
        });
    }
},
router
});

Мой логин будет просто нормально регистрироваться, но я не могу вызвать @{{ user }} в любом блейд-файле.Как именно я должен получить текущего пользователя при инициализации приложения?

Answer 1

Ваше вычисленное свойство user возвращает Promise объект, а не желаемое значение.

Ниже мое предложение по решению вашей проблемы.Вы должны быть в состоянии успешно вызвать @{{ user }} в ваших файлах блейдов.Однако для доступа к свойству user в дочерних компонентах вы вынуждены использовать свойство $parent.user их.

Лично я рекомендую вам проверить Vuex , который предназначен для таких случаев.Это централизованное решение для хранения состояний, позволяющее вам получать доступ (и управлять) данными со всего вашего приложения.

new Vue({
  el: '#app',
  data () {
    return {
      user: null
    };
  },
  created () {
    // As app intializes user is fetched and saved
    this.fetchUser();
  },
  methods: {
    fetchUser () {
      axios.get('/current-user')
        .then(response => {
          this.user = response.data;
        })
        .catch(error => {
          alert('Something went wrong');
          console.error(error.response.data);
        });
    }
  },
  router
});