将数据直接从Blade文件传递到Vue实例

Question

我正在处理一个Vue应用程序，它嵌入在Laravel项目中。我将Vue实例绑定到放置在blade文件中的id上。

我想要做的是从Laravel/blade向我的Vue实例传递已登录的用户。有没有办法这样做？我知道你可以通过props传递数据，但这里只是一个带有id为#root的普通div，它绑定了Vue实例。我知道如何获取已登录的用户信息，但我特别寻求一种直接从blade向Vue实例传递数据的方法。

app.js

// Require the deps from laravel (jQuery, axios, Bootstrap)
require('./bootstrap');

// Import vue deps
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter)

// Import the router & routes
import router from './routes'

// Init a new vue instance
const root = new Vue({
    el: '#root',
    data: {
        User: name here..
    },
    router
});

Blade

@extends('layouts.app')

@section('content')

<!-- pass user below -->
<div id="root"></div>

@endsection

- Giesburts

Answer 1

在您的 blade 文件中，将已登录用户信息传递给一个 JavaScript 全局变量。比如说，您只需要用户 id 和名称：

<script>
    window.auth_user = {!! json_encode([
        'id'     => auth()->user()->id,
        'name'   => auth()->user()->name
    ]) !!};
</script>

然后在您的javascript中，您可以访问auth_user全局变量。例如，记录用户名称：

console.log(auth_user.name)

或者

console.log(window.auth_user.name)

- HotRod

---

运行得非常好。我之前使用过 window.attribute 来处理不同的 js 文件，但没有像这样的效果。 - brunouno

非常有趣的解决方案。也许不是直接针对这个问题，但是很有帮助。谢谢。 - Świeżu

Answer 2

你有几个选项（我认为我没有列出所有的）例如：

1. 您可以通过将数据转换为json并编写为HTML元素或属性来传递数据，然后使用例如document.querySelector(...)从vue中读取 - 更多信息请参见：在HTML属性中存储JSON的最佳方法？

2. 您可以稍微更改架构，并创建单独的（Restful）API，您的vue组件将通过ajax使用它来读取数据（例如，您可以创建GET api/v1/currentUser以读取当前登录用户）

3. 完全更改您的架构 - 到“微服务” - 因此在laravel中仅创建Restful API，并创建具有vue（而不是laravel）用户界面的SEPEARATE项目，该界面使用该API（这是分离后端和前端的现代方法）。在这种方法中，您将面临CORS问题，但这并不难（只有第一次）。

- Kamil Kiełczewski

---

好的，我同意你提出的选项都是可行的，但是我特别想找一种通过html/blade将数据传递给实例的方法。也许这是不可能的，我不确定，但在像上面那样做之前，我必须先了解清楚。谢谢 :) - Giesburts

Answer 3

你可能想要看一下PHP-Vars-To-Js-Transformer包。你可以在控制器中或者@php指令中使用它。
不过在VueJS中可能不是一个好的实践。

- LevFlavien