将数据从 Laravel 传递到 Vue 组件的最佳实践答案

【问题标题】：Best practice to pass data from Laravel to Vue component将数据从 Laravel 传递到 Vue 组件的最佳实践
【发布时间】：2018-12-24 06:33:57
【问题描述】：

这是我的刀片代码

<div id="app">
  <Testcomponent bam-wam="ham" />
</div>

这是我的 VueJS 组件代码

<script>
    export default {
        name: "ExampleComponent",
        props: [
            'bamWam'
        ],
        data () {
            return {

            };
        },
        created() {
            console.log(this.bamWam);
        }
    }
</script>

问题是

这段代码运行良好，但我想问什么更好使用 Axios 和 Vuex 从我的 Laravel 应用程序中获取数据 或者只是 像我在这段代码中所做的那样传递数据抛出道具?

【问题讨论】：

两者都可以，这真的取决于用例。如果你使用 Laravel 来生成所有的视图并且只是让 vue 组件分布在整个项目中，那么这个实现可能就很好了。如果您尝试使用 vue 构建整个前端或 SPA，并更多地使用 Laravel 作为后端 API，那么请使用 AJAX。
谢谢您的帮助..您可以将其发布为答案
这不是一个真正的答案，这只是我的意见。此处不鼓励最佳实践/自以为是的问题和答案。我很高兴能帮上忙，不过我可能会删除这个问题。

标签： laravel vue.js vuex

【解决方案1】：

通过 props 传递数据是最好的方式。

<my-component my-data="yourData"></my-component>

如果你想使用 laravel 变量来获取刀片数据，那么，

<my-component my-data="'{{ $data.id }}'"></my-component>

<my-component :my-data="'{!! json_encode($data) !!}'"></my-component>

尽量避免api调用。它将减少对服务器的请求总数并暴露更少的 api 端点。

【讨论】：

谁给这个家伙投了反对票？这应该被接受为答案。不完美，但这是完成工作的一种方式。
如果您看到您的数据开始显示而不是发送到您的组件，请尝试使用:my-data="{{ json_encode($data) }}" source

【解决方案2】：

如果数据可用于添加组件的视图。那么将 php 数组从 laravel 传递到 vue 组件的最佳方法是使用 json 编码，如下所示：

<my-component :needed-data='@json($laravelCollection)'></my-component>

这将使您可以轻松地对 Vue 控制器中的 php 数组执行操作，就好像它是一个 JS 对象一样。请记住，@json 必须使用单引号。

对于简单的字符串，您可以直接将其作为道具传递而无需编码。

这种方法比专门为这个组件创建一个新的 API 要好。

【讨论】：

【解决方案3】：

这是唯一适合我的方法：

<my-component :data="{{ $collection }}"></my-component>

JSON 解析解决方案以 HTML 格式打印数据。

【讨论】：