laravel - 在 Laravel 和 Vue 之间共享数据的正确方式

Question

我有一个使用 Laravel 和 Vue 的应用程序。控制器有类似这个索引的方法

   public function index(Request $request)
    {
        $people = Person::all();
        if ($request->ajax()){
            return response()->json($people);
        }
        return view('people.index')->withPeople($people);
    }

问题是：获取数据的正确方法是什么（Vue）？

我们可以使用类似这段代码

<example-component@prop('people', $people)></example-component>

在组件中传递变量或者我们可以使用 Axios。

Answer 1

我可以做类似以下的事情

$people = Person::all();
    if ($request->ajax()){
        return response()->json($people);
    }

使用 Axios

getAll() {      

    return axios.get(`${base_url}/persons`);

}

获取所有人员

getPersons() {
  return persons
    .getAll()
    .then(response => {
   
      // console.log(this.persons);
  
      this.persons = response.data;
     
    })
    .catch(error => {
      console.log(error);          
    })
    .finally(() => (this.loading = false));
},

在组件中

<example-component>{{persons}}</example-component>

Answer 2

您可以在脚本标签内回显 php 变量

在*.blade.php

<script>
var people = {{ $people }};
</script>

在 vue 脚本中

const people = people; // or const people = window.people || ''
new Vue {
  data() {
    return { people }
  }
}

在 vue 模板中

<example-component@prop('people', people)></example-component>