Javascript 将laravel变量传递到Vue前端

为了将php变量从laravel传递到vue前端，我创建了一个Javascript类，我使用这个类的static put方法向前端发送一个关联数组

<?php
namespace App\Helpers;


class Javascript
{

    public static function put($array, $request)
    {
        //I call this static method to pass backend variables to Vue, from blade I json_encode the payload, assign it to a window variable
        //and later add it to the Vue.prototype so I can access in vue components like this.$app.whatever.

        //This helper method can be called more than one time in laravel's request->reponse cycle, from middleware, controller action, route redirect ... 
        //so instead of creating recreating $app array everytime I want to find a way to push passed key value pairs to a global javascript object

        $app = array();

        $app = array_merge($request->globals, $array);

        view()->share('app', $app);
    }

}

在我的刀片主布局中：

<script type="text/javascript">window.$app = {!! json_encode( $app ) !!};</script>

目前，在我的Javascript类中，我创建了一个empy数组，并将部分请求与从控制器传递的数组合并，我还将请求对象作为seconda参数传递，我希望通过两种方式对此进行改进：

1） 每次我调用Javascript:：put静态方法时，传递的值都会合并到现有对象中，这是因为如果在我调用Javascript:：put的请求->响应周期中重新创建负载，并且以前的数据丢失，是否有办法保留此数据

---

2） 我不想每次运行Javascript:：put时都传递Request$Request对象，有没有办法总是注入Request方法

如果您从blade调用vue，您可以像道具一样传递laravel数据

@extends('index')
@section('contenido')
  <div id="content-container">
     <div id="page-head">
     </div>
     <div id="page-content">
        <vue-file :variable="{{ $variable}}"></vue-file>
    </div>
@endsection

---

你为什么要这样做？只需通过AjaxI获取数据并与Saly达成一致-只需将其作为Vue组件，在Vue组件的脚本中使用axios调用PHP端点，并将结果输出到组件的模板中。您可以使用Vuex或/和localStorageMy应用程序在本地持久化数据。我的应用程序是非spa laravel vue的混合，基本上我所有的视图都是刀片式简单布局，vue组件构成UI/UX，在初始渲染后进行ajax调用是一种反模式，我主要在管理面板中使用vuex AFO，并在页面呈现后通过api端点发送axios调用，我希望页面中有一些数据不在vuex中。我做的有那么糟糕吗？我将窗口变量添加到vue原型中，并可以通过这种方式访问所有组件，因此这对我来说非常方便。

public function handle($request, Closure $next)
{
   $globals['auth'] = Auth::user() ?  User::with('appointment')->find(Auth::id()) : false;

   $globals['previousUrl'] = URL::previous();

   $request->globals = $globals;

   return $next($request);
}

@extends('index')
@section('contenido')
  <div id="content-container">
     <div id="page-head">
     </div>
     <div id="page-content">
        <vue-file :variable="{{ $variable}}"></vue-file>
    </div>
@endsection

props:{
 variable:Array  
}