在 Laravel 中使用 Vue/Axios 加载当前用户

【问题标题】：Load current user with Vue/Axios in Laravel在 Laravel 中使用 Vue/Axios 加载当前用户
【发布时间】：2018-11-21 03:36:06
【问题描述】：

好的，我正在尝试找到将当前用户加载到我的 vue 应用程序中的最佳方法，以便我可以从任何其他组件或路由中提取用户名和 ID。

现在我已经尝试过了：

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 }}。我应该如何让当前用户进行应用初始化？

【问题讨论】：

标签： laravel vue.js axios

【解决方案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
});

【讨论】：