将刀片文件中的数据直接传递给 Vue 实例

Question

我正在开发一个存在于 Laravel 项目中的 Vue 应用程序。我将我的 vue 实例绑定到放置在刀片文件中的 id。

我想做的是将登录的用户从 Laravel/blade 传递给我的 Vue 实例。有没有办法做到这一点？我知道你可以通过 props 传递数据，但这只是一个 id 为 #root 的常规 div，它绑定了 Vue 实例。我知道如何获取已登录的用户，但我特别想寻找一种将数据从刀片直接传递到我的 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
});

刀片

@extends('layouts.app')

@section('content')

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

@endsection

Answer 1

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

1. 您可以通过将数据转换为 json 并写入 HTML 元素或属性来传递数据，然后使用例如从 vue 读取它。 document.querySelector(...) - 更多信息：Best way to store JSON in an HTML attribute?

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

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

Answer 2

您可能想查看PHP-Vars-To-Js-Transformer 包。您可以在控制器或 @php 指令中使用它。
不过，使用 VueJS 可能不是一个好习惯。

Answer 3

在您的刀片文件中，将记录的用户信息传递给 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)