Question

所以我使用的是Laravel 5.5。我有一个来自我的Controller的数据，我想将它传递给我的root vue实例而不是组件。

例如，我有一个仪表板控制器，其数据为＆＃34;用户＆＃34;

class DashboardController extends Controller {

    public function index(){

       $user = User::find(1);

       return view('index', compact('user'));

    }

}

我在项目设置中使用Larave mix。所以我的主要js文件是app.js.那个＆＃34; $ user＆＃34;数据我需要传递根Vue实例。它位于app.js

const app = new Vue({
    el: '#dashboard',

    data: { 
        // I want all the data from my controller in here.
    },

});

Answer 1

如果您不想使用API调用来获取数据（使用 axios 或其他方式），您可以尝试这样做：

JavaScript::put(['user' => $user ]);

默认情况下，这会将您的JavaScript变量绑定到“页脚”视图。您应该在此页脚视图后加载app.js（或修改参数bind_js_vars_to_this_view）。

在app.js：

data: { 
    user: user
}

了解详情：https://github.com/laracasts/PHP-Vars-To-Js-Transformer

Answer 2

我会按照建议提出取得用户数据的请求。

或者，您可以在index.blade.php中向仪表板组件添加prop，并将用户设置为<dashboard :user="{{ $user }}"></dashboard>。您可能希望{$ 1}}或json_encode $ user变量。

然后，在仪表板组件中，您可以根据道具设置数据值。

->toArray()

Answer 3

我刚刚解决了这一问题，方法是在布局文件window的{{1}}对象上放置一个引用，然后使用可以注入任何组件的mixin拾取该引用。

TLDR解决方案

.env

<head>

config / geodata.php

GEODATA_URL="https://geo.some-domain.com"

资源/视图/布局/root.blade.php

<?php

return [
    'url' => env('GEODATA_URL')
];

资源/js/components/mixins/geodataUrl.js

<head>
    <script>
        window.geodataUrl = "{{ config('geodata.url') }}";
    </script>
</head>

用法

const geodataUrl = {
    data() {
        return {
            geodataUrl: window.geodataUrl,
        };
    },
};

export default geodataUrl;

END TLDR解决方案

如果需要，可以使用全局混合来代替，只需将其添加到<template> <div> <a :href="geodataUrl">YOLO</a> </div> </template> <script> import geodataUrl from '../mixins/geodataUrl'; export default { name: 'v-foo', mixins: [geodataUrl], data() { return {}; }, computed: {}, methods: {}, }; </script>入口点即可：

app.js

但是，我不建议对任何敏感数据使用此模式，因为它位于Vue.mixin({ data() { return { geodataUrl: window.geodataUrl, }; }, });对象上。

我喜欢这个解决方案，因为它不使用任何额外的库，并且代码链非常清晰。它通过了grep测试，您可以在代码中搜索window，并查看所需的所有信息，以了解代码的工作方式和原因。

如果代码可能存在很长一段时间，而另一个开发人员可能遇到该问题，则这一考虑很重要。

但是，我认为"window.geodataUrl"是一个值得拥有的不错的实用程序，但是在过去，我不喜欢出现问题时很难调试，因为您看不到其中的位置。数据来自的代码库。

想象一下，您有一些Vue代码正在消耗JavaScript::put([])中的window.chartData。根据代码库中对JavaScript::put([ 'chartData' => $user->chartStuff ])的引用数量，您可能需要很长时间才能发现哪个PHP文件负责使chartData正常工作，尤其是如果您未编写该代码而下一个人不知道正在使用window.chartData。

在这种情况下，我建议在代码中添加注释，例如：

JavaScript::put()

此人可以在代码中搜索/* data comes from poop.php via JavaScript::put */并快速找到它。请记住，在忘记实施细节之后的6个月内，“人员”可能就是您自己。

使用这样的Vue组件prop声明总是一个好主意：

"JavaScript::put"

我的意思是，如果您使用props: { chartData: { type: Array, required: true, }, },，那么如果组件无法接收数据，那么Vue无法轻松检测到。 Vue必须假定数据在引用对象时位于窗口Object上。最好的选择是创建一个GET端点，并在创建/装入的生命周期方法中进行访存调用。

我认为在获取/设置数据方面，Laravel和Vue之间必须有明确的约定。

为了通过给您更多选择来帮助您，以下是使用ES6语法糖进行调用的示例：

routes / web.php

JavaScript::put()

app / Http / Controllers / UserController.php

Route::get('/charts/{user}/coolchart', 'UserController@getChart')->name('user.chart');

Vue中的任何地方，尤其是创建的生命周期方法：

public function getChart(Request $request, User $user)
{
    // do stuff
    $data = $user->chart;

    return response()->json([
        'chartData' => $data,
    ]);
}

该示例假定您的Vue组件是Mealy有限状态机，因此该组件在任何给定时间只能处于一种状态，但可以在状态之间自由切换。

我建议使用诸如计算道具之类的状态：

created() {
    this.handleGetChart();
},

methods: {
    async handleGetChart() {
        try {
            this.state = LOADING;
            const { data } = await axios.get(`/charts/${this.user.id}/coolchart`);

            if (typeof data !== 'object') {
                throw new Error(`Unexpected server response. Expected object, got: ${data}`);
            }

            this.chartData = data.chartData;
            this.state = DATA_LOADED;
        } catch (err) {
            this.state = DATA_FAILED;
            throw new Error(`Problem getting chart data: ${err}`);
        }
    },
},

带有标记，例如：

computed: {
    isLoading() { return (this.state === LOADING); },
    isDataLoaded() { return (this.state === DATA_LOADED); },
    isDataFailed() { return (this.state === DATA_FAILED); },
},

如何使用Laravel Mix Setup将Laravel数据传递到Vue根实例

3 个答案: