在页面之间共享数据 - Laravel Vue答案

【问题标题】：Sharing Data Between Pages - Laravel Vue在页面之间共享数据 - Laravel Vue
【发布时间】：2019-12-20 02:34:26
【问题描述】：

我目前正在研究 Vue，作为我的 Laravel 后端的前端。在做任何事情之前，我想问一些事情。

假设我有一个主模板 - 一个用户配置文件。当我第一次访问用户个人资料时，我得到了他的所有数据（假设地址 - 作为另一个选项卡，个人数据作为另一个选项卡，以及 n 个特定于选项卡的选项卡）。每当我访问用户 /user/1 时，我都会查询他的所有子选项卡并在选项卡之间共享这些数据（以减少调用 API）。这样的尝试可行吗？

感谢您的帮助。

【问题讨论】：

您确实会因为不使用 api 而变得更加困难。 Vue 是关于异步的。 @Maurice Vera 回答的是第一次使用来自控制器的数据加载页面的方式。只需确保您对数据进行 JSON 编码/解码即可。
如果您害怕创建自己的身份验证守卫，只需让您的用户对象对视图全局可用hdtuto.com/article/laravel-5-global-variable-in-all-views-file

【解决方案1】：

是的，当然 - Vue 到 Laravel 的通信主要通过 API 完成，特别是如果您在 Vue.js 中覆盖整个前端，而不是 Vue 和 Bladee 的混合。
有一些方法可以“防止”滥用您的公共 API，但让我们面对现实吧 - 任何事情都可以绕开，因为限制您的公共 API 会限制您网站的工作方式。一种方法是将会话配置为关闭时擦除，然后在有人进入网站时生成令牌 - 这样，只有拥有有效令牌（当前在网站上）的人才能使用公共 API.. 但它是两个- 锋利的剑。

【讨论】：

【解决方案2】：

我认为解决您两个问题的方法是将您需要的数据从控制器传递到 Blade 模板，然后从那里将其作为 json 回显，在 Vue 方面，您将其作为组件属性接受.

一个例子：

@extends('layouts.user-profile')

@section('user-data')
    <user-component
        :data="{{ $user }}"
    >
    </user-component>
@endsection

这里重要的部分是:data={{ $user }}。这里你回显了 $user php 变量，Laravel 会自动将其转换为 json。

【讨论】：