質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vuex

Vuexは、Vue.js アプリケーションのための状態管理ライブラリです。アプリケーション内で使用するコンポーネントのための集中データストアを提供。コンポーネント同士でデータをやり取りし、処理のフローを一貫させたり、データの見通しを良くすることができます。

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

Q&A

解決済

1回答

2236閲覧

laravel(DB)からの情報を、vuexのstoreに渡す方法は?

marutto

総合スコア32

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vuex

Vuexは、Vue.js アプリケーションのための状態管理ライブラリです。アプリケーション内で使用するコンポーネントのための集中データストアを提供。コンポーネント同士でデータをやり取りし、処理のフローを一貫させたり、データの見通しを良くすることができます。

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

0グッド

2クリップ

投稿2019/12/23 03:10

laravel5.8でWebアプリを作っています。

vue+vuexを導入して開発しているのですが、laravelがDBから引っ張ってきた情報をvuexのstoreに渡して各コンポーネントから参照させたいと思っています。

しかし、バックエンドからvuexに情報を渡すという試みは今回が初めてで、どうすればいいか立ち往生しています。

vue単体ならviewファイル内でコンポーネントを呼び出す際、タグ内にv-bindを使い、情報をpropsで渡す、という方法で何回かやったことがあるのですが・・・。

@section('content') // vue単体ならこれでOK <section class="l-container--books"> <book-component :book={{ $books }}></book-component> </section> @endsection // しかし、vuexのstoreに渡す方法は?

お手数おかけしますが、アドバイスいただけますと幸いです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

クライアントサイドで動作するJavsScriptと、サーバサイドで動作するPHPで情報をやりとりする一般的な方法はWebAPIを利用した情報のやりとりです。
具体的にやることは、まずLaravel側でDBの情報を返却するAPIを作成し、次にvueでそのAPIを使って情報を取得してstoreに反映するという作業が必要になります。
わりかし丁寧なサンプルが下記のリンクに載っていますので参考にしてみてください。

まず:LaravelでCRUD APIを作成する
次に:Laravel+Vue.js+VuexでフロントのCRUDを作成

投稿2019/12/23 07:23

guissy-k

総合スコア245

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

marutto

2019/12/23 09:37

アドバイスと解りやすい資料ありがとうございます! 機能実装には至ってないのですが、いただいた資料が解りやすいのでベストアンサーにさせていただき、 後で実装を元に解決方法を追記させていただきます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問