Vue.js 2.0 Laravel 5.4 将对象传递给应用程序并跨组件全局使用它

Posted 2023-02-23

【中文标题】Vue.js 2.0 Laravel 5.4 将对象传递给应用程序并跨组件全局使用它

【英文标题】：Vus.js 2.0 Laravel 5.4 pass object to app and use it globally accross components

【发布时间】：2017-07-16 00:29:12

【问题描述】：

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

我的 Laravel home.blade.php 引用了一个 Vue 应用程序，我尝试将 Auth::user() 绑定到主 vue：

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

我的 app.js 文件如下所示：

const app = new Vue(
  el: '#app',
  props: ['authuser'],
  data:  authuser: this.authuser 
);

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

注意：除了通过道具之外，我愿意接受其他建议。理想情况下，我想从我的所有 vue 组件中全局引用一个 authuser 对象。例如可能通过window.authuser？

【参考方案1】：

在调用 app.js 之前将其添加到刀片模板中就可以了：

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

这将允许您在任何组件中直接全局使用authuser，例如：

<template>
  <div class="answer" v-if="authUserAnswered">
     Edit Answer
  </div>
</template>

<script>
  export default 
    props: ['answer'],
    computed: 
      authUserAnswered()  return authuser.id == this.answer.user_id; 
    
  
</script>

这比每次都使用this.$root 更干净。

您可以了解有关Shared States here 的更多信息。

【参考方案2】：

一种方法是使用$root。按照here的建议，应该可以在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

---

其他方法可以使用central state 或vuex，这在社区中更受欢迎。你可以看看类似的答案here。您可以在 app.js 的 created/mounted 块中提交 vuex mutation，然后可以在 getters 的帮助下在任何组件中访问它。

【讨论】：

在您的示例中，您如何将 php 中的 this.authuser 获取到 const app？

@BassemLhm this 应该会有所帮助。

感谢您的帮助，您的回答加上我看过的 laracast 让我找到了答案。我想避免在我的组件中重复 this.$root.authuser。

【参考方案3】：

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

例如：

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

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

你也可以将它应用到 vue 对象本身（如果你愿意的话）：

global.vm = new Vue(
    methods: 
        helloWorld()
    
);

您将能够从其他组件访问它的方法等：vm.helloWorld();。

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

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

但也许使用 AJAX 请求会更好。