Javascript Vus.js 2.0 Laravel 5.4将对象传递给应用程序，并在组件中全局使用它

我希望加载经过身份验证的用户，并在我的所有vue组件中使用它（没有不必要的ajax请求，因为我可以直接从后端加载它）

我的Laravel

home.blade.php

引用了一个

Vue

应用程序，我尝试将

Auth:：user（）绑定到主Vue:

<div id="app" :authuser="{{ Auth::user() ? : '[]' }}"></div>

但似乎无法将道具传递给主
Vue
对象。最好的方法是什么

注意：除了通过道具，我愿意接受其他建议。理想情况下，我希望从我的所有vue组件全局引用一个
authuser
对象。例如，可以通过
窗口.authuser
执行此操作。
一种方法是使用。根据建议，您应该能够在
app
组件中设置并跨组件使用它

在你的app.js中：

const app = new Vue({
  el: '#app',
  created () {
    // will fire the first time the router is loaded,
    // and won't be called again until page refresh
    // maybe load in your data dynamically?
    this.$root.authuser = this.authuser;
  }
});

然后在组件中：

this.$root.authuser


另一种方法是使用在社区中更受欢迎的or。你们可以看看类似的答案。您可以在app.js的created

/

mounted

块中提交vuex，以后可以在的帮助下在任何组件中访问它。

一种方法是使用。根据建议，您应该能够在

app

组件中设置并跨组件使用它

在你的app.js中：

const app = new Vue({
  el: '#app',
  created () {
    // will fire the first time the router is loaded,
    // and won't be called again until page refresh
    // maybe load in your data dynamically?
    this.$root.authuser = this.authuser;
  }
});

然后在组件中：

this.$root.authuser

---

---

另一种方法是使用在社区中更受欢迎的or。你们可以看看类似的答案。您可以在app.js的

创建的

/

挂载的

块中提交vuex，以后可以在的帮助下在任何组件中访问它。

在调用

app.js

之前将其添加到刀片模板中可以实现以下功能：

<script>
  let authuser = {!! Auth::user() ? : '[]' !!};
</script>
<script src="{{asset('js/app.js') }}"></script>

这比每次使用

This.$root

更干净

---

你可以了解更多关于

在调用

app.js

之前将其添加到刀片模板中可以实现以下目的：

<script>
  let authuser = {!! Auth::user() ? : '[]' !!};
</script>
<script src="{{asset('js/app.js') }}"></script>

这比每次使用

This.$root

更干净

---

你可以了解更多关于

在app.js中，您可以声明全局变量

例如：

// app.js
global.user = 'hello';

// anywhere else, you can access the user var
console.log(user);

您还可以将其应用于vue对象本身（如果需要）：

您还可以从其他组件访问它的方法等：

vm.helloWorld（）

要让用户进入app.js，您可以在脚本标记之间以JSON格式打印它。你的app.js稍后应该可以访问它。例如

<script>
    var user="{{$user}}";
</script>
<script src="app.js" type="text/javascript"></script>


var user=“{{$user}}”；

但是使用AJAX请求可能更好。
在app.js中，您可以声明全局变量

例如：

// app.js
global.user = 'hello';

// anywhere else, you can access the user var
console.log(user);

您还可以将其应用于vue对象本身（如果需要）：

您还可以从其他组件访问它的方法等：
vm.helloWorld（）

要让用户进入app.js，您可以在脚本标记之间以JSON格式打印它。你的app.js稍后应该可以访问它。例如

<script>
    var user="{{$user}}";
</script>
<script src="app.js" type="text/javascript"></script>


var user=“{{$user}}”；

但是使用AJAX请求可能更好。
在您的示例中，如何将
this.authuser
从php转换为
const app
？@BassemLhm应该会有所帮助。感谢您的帮助，您的答案与我观看的laracast相结合，让我找到了答案。我想避免在我的组件中重复此操作。$root.authuser。在您的示例中，如何将
this.authuser
从php转换到
const-app
？@BassemLhm应该会有所帮助。感谢您的帮助，您的答案与我观看的laracast相结合，让我找到了我的答案。我希望避免在我的所有组件中重复此操作。$root.authuser。