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>
25.1.27 Vue忘れた時用のメモ
mapStateってなんだっけ？
code:App.vue
<small style="font-size: 12px;">{{ battleCommands }}<br></small>
computed: {
...mapState({
status: state => state.menu.status,
battleCommands: state => state.battle.selectedCommands,
}),
},
Vuexのstateには、アプリ全体で共有される状態を保持している
mapStateヘルパは、stateをコンポーネントのcomputedプロパティとしてマッピングしている
state =>
アロー関数で書いてるだけ。
code:js
function (state) {
return state.battle.selectedCommands;
}
ステータス全体をstateという命名をつけ、その中の値を返すようにしている
code:js
battleCommands: myState => myState.battle.selectedCommands,
こんな感じで、自分で任意の命名をすることもできる
await, asyncについて
async
関数の前に付与する。その関数はPromiseという値を必ず返す関数として認識される。
中の処理が全部終わると、returnされる値はPromise.resolve(値)という形で返る。
途中でエラーが発生すると、Promise.reject(エラー)という形で返る。
code:js
// こんな感じのものと、ほぼ同じ
function foo() {
return Promise.resolve(123)
}
await
async関数の中でしか使えない。
Promiseの結果が返ってくるまで待つことができる。
axiosと相性が良く(Promiseを返すので)、これを使うと「非同期処理が終わるまで待つ」ような挙動を見せてくれる
ただし実際に処理がブロックされるわけではなく、JSのイベントループに停止処理を送り、Promiseが解決したら続きを実行するような指示の流れになる。
code:js
let data = await axios.get('/api/test');
// 次の行からは、必ず data にレスポンスが入っている形になる
async, awaitはtry/catchと組み合わせると丸い
code:js
try {
// 待った結果失敗した場合は、例外がthrowされる
const res = await axios.get('/api/test');
console.log(res.data);
} catch (e) {
console.error('失敗', e);
}