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

Question

这是我的刀片代码

<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 应用程序获取数据 更好，或者 像我在这段代码中所做的那样简单地传递数据抛出道具？

原文由 Dill 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

如果你想对 blade 中的数据使用 laravel 变量，那么，

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

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

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

原文由 Summonjoy 发布，翻译遵循 CC BY-SA 4.0 许可协议