Vue
経緯
この辺りの学習を進めて、Vue専用のページも欲しいと思ったからとりあえず作った。
テストコードを書いて理解してみる
code:環境
Vue.js v3.4
node.js v20.17.0 ※npm導入用
npm v10.8.2
vite v5.4.2 (laravel-mixから移行)
基本
コンポーネントを作って
その中でaxiosやjqueryを使いたいなら定義して
そのコンポーネントをbackend/resources/js/app.js で
インポートして
blade側でコンポーネントとして置き換える先の要素を取得して
document.getElementByIdなどで。もっといい方法があるかも。
マウントする。
blade側で指定したidで<div>などに紐付けてやる。
複数のコンポーネントを管理するときはどう書くのが一番綺麗になるんだろうか...
参考記事を読んでみる
laravel-ui
php artisan ui vueとすることで、app.jsなどをvueの方式で書くようなテンプレートとして作ってくれる
laravel11のデフォルトのapp.jsファイルがほぼ真っ白なのは、これで作る想定をしているから
vue-routerを入れる
SPAを作るときにルーティング処理を行うツール
$ npm install --save vue-router
すでに入れてた "vue-router": "^4.4.3"
vue-routerを導入することで、このページにはこのコンポーネントを出すということが実装できそうだ
laravel9, vue3, vue-router4の組み合わせの記事(現状一番参考にできそう。）
router.jsとしてルーティングは分ける
考え方
ベースのコンポーネントがまず1つある(上の例では、App.vue)
App.vueに対して、ページのURLで何を出すのか決めていくイメージ
/ならHomeのコンポーネントだとか
/aboutならAboutのコンポーネントだとか。
親から子にデータを渡す
code:App.vue
<router-view :AppVueValue></router-view>
...
export default {
data() {
return {
AppVueValue: 'App.vueで定義したデータ',
}
},
router-viewで変数を指定して渡せる
vuex
状態を管理するための仕組み。例えばゲーム実装だと以下のような画面が存在するとして、
タイトル
メニュー画面
戦闘画面とか
画面を切り替えるためには、ゲームが現在どのような状態かの把握が必要。
コンポーネントだけで管理すると煩雑になるので、vuexで一元管理すると保守性が上がる。
code:store.js
import { createStore } from 'vuex';
export default createStore({
// 状態を表す変数を定義する
state: {
currentScreen: 'title', // とか
...
},
// 状態変更のためのメソッド
mutations: {
// 現在の状態を格納
setScreen(state, screen) {
state.currentScreen = screen;
},
...
},
actions: {
// 状態更新のためのメソッド
},
});
上記を親側のコンポーネントで変更していく。
code:App.vue
<template>
<div v-if="currentScreen == 'title'">
<router-view></router-view>
</div>
</template>
<script>
export default {
computed: {
},
};
</script>