如何在不使用道具的情况下将物体从Laravel传递到Vue

Question

我正在设置Laravel 5.8应用程序中的一些VUE组件，这些vue组件需要通过Auth::user()提供的用户信息，最重要的是，我必须在AXIOS请求中使用的api_token。我想以安全和私人的方法将Auth::user()对象从Laravel传递到Vue。

我最初将对象作为道具传递，但是我不希望使用浏览器扩展名(例如Vue DevTools(轻松暴露在对象上的私人信息。现在，我一直在寻找一种定义刀片模板内的全局变量的方法，并在VUE中访问它们：

将数据从刀片传递到VUE组件

https://forum.vuejs.org/t/accessing-global-variobles-from-single-file-vue-component/638

https://zaengle.com/blog/layers-of-a-laravel-vue-application

基于上面的链接，似乎我需要做的是将变量设置为窗口对象，但是我不确定要实现这一目标的错误。当我在刀片模板中定义变量时，我可以看到该变量通过执行console.log()来正确分配，但是当我尝试在VUE中使用它时，问题出现了。

app.blade.php

@if(Auth::user())
    <script>
        window.User = {!! json_encode(Auth::user()) !!}
        console.log(window.User)
    </script>
@endif

component.vue

<script>
export default {
    data: function() {
        return {
            user: window.User
        }
    }
}
</script>

我尝试将数据设置为window.User，this.User，而仅将数据设置为User，但它总是以undefined的形式出现。我想念什么？还是有其他/更好的方法可以做到？

Answer 1

尝试以下vue组件：

<template></template>
<script>
    export default {
        data: function() {
            return {
                user: window.User
            }
        },
        created(){
            console.log(this.user)
        },
    }
</script>

我可以在VUE组件中查看console.log的用户数据。