Question

好的，我正在尝试找到将当前用户加载到我的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 }}。我应该如何让当前用户进行应用初始化？

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

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

1 个答案: