Vuexストアによる状態管理が十分理解できていなかったが、図解をすることでかなり理解できたからアウトプットしていく。 Vuexストアの図解 （参考記事） https://codezine.jp/article/detail/11994 【流れの説明】 1. コンポーネントがWebページの更新をするためにアクションを実行する（dispatch）。 2. アクションでWeb APIなどの更新に必要なデータを取得（１）。 3. アクションで取得したデータを状態に反映させるためにミューテーションを実行する（commit）。 4. ミューテーションでステートの変更を行う（Mutate）。 5. ステートでWebページ全体の状態を保持する（３）。 6. 変更されたステートに基づいてコンポーネントが画面を表示（Render）。 細く言えば、まだいろいろな要素が残って行っているけど、基本的にこの流れをおさえておけば、かなり理解できた。 実際に使用してみる 概念だけだとあまり定着できないことの方が多いから手を動かしてみる。 花谷氏の「Nuxt.jsビギナーズガイド」を使って学習した内容をいかして、axios-moduleを利用しWordpressの記事情報を取得するときの状態管理を記述していく。 ヘッドレスのwpの導入方法については今回は割愛。 store/index.js // 5. ステートでWebページ全体の状態を保持する（３）。 export const state = () => ({ posts: [], }) // stateで保持しているデータを取得するために使用 export const getters = { posts: (state) => state.posts } // 4. ミューテーションでステートの変更を行う（Mutate）。 export const mutations = { setPosts(state, { posts }) { state.posts = posts } } // 2. アクションでWeb APIなどの更新に必要なデータを取得（１）。 export const actions = { async fetchPosts({ commit }) { const posts = await this.$axios.$get('https://~/wp-json/wp/v2/posts?_embed&tags=6') // 3. アクションで取得したデータを状態に反映させるためにミューテーションを実行する（commit）。 commit('setPosts', { posts }) } } pages/index.vue <template> // 6. 変更されたステートに基づいてコンポーネントが画面を表示（Render）。 <div>{{ posts }}</div> </template> <script> import { mapGetters } from 'vuex' export default { async asyncData({ store }) { // 1. コンポーネントがWebページの更新をするためにアクションを実行する（dispatch）。 await store.dispatch('fetchPosts') }, computed: { ...mapGetters(['posts']) }, } </script> 今回は、直接stateからデータを取得するのではなく、gettersを経由して取得している。 順番がかなり前後しているが、このような流れを意識してVuexストアを記述すると初めてうまくいった。 図解はかなり効果的な定着方法 コードが複雑なればなるほど、頭の中でイメージを膨らませるのでが大切で、頭の中で整理できないものは実際に図などに落とし込みをするのがいいなと感じた。
Vuexストアによる状態管理が十分理解できていなかったが、図解をすることでかなり理解できたからアウトプットしていく。
（参考記事） https://codezine.jp/article/detail/11994
【流れの説明】 1. コンポーネントがWebページの更新をするためにアクションを実行する（dispatch）。 2. アクションでWeb APIなどの更新に必要なデータを取得（１）。 3. アクションで取得したデータを状態に反映させるためにミューテーションを実行する（commit）。 4. ミューテーションでステートの変更を行う（Mutate）。 5. ステートでWebページ全体の状態を保持する（３）。 6. 変更されたステートに基づいてコンポーネントが画面を表示（Render）。
細く言えば、まだいろいろな要素が残って行っているけど、基本的にこの流れをおさえておけば、かなり理解できた。
概念だけだとあまり定着できないことの方が多いから手を動かしてみる。
花谷氏の「Nuxt.jsビギナーズガイド」を使って学習した内容をいかして、axios-moduleを利用しWordpressの記事情報を取得するときの状態管理を記述していく。
ヘッドレスのwpの導入方法については今回は割愛。
// 5. ステートでWebページ全体の状態を保持する（３）。 export const state = () => ({ posts: [], }) // stateで保持しているデータを取得するために使用 export const getters = { posts: (state) => state.posts } // 4. ミューテーションでステートの変更を行う（Mutate）。 export const mutations = { setPosts(state, { posts }) { state.posts = posts } } // 2. アクションでWeb APIなどの更新に必要なデータを取得（１）。 export const actions = { async fetchPosts({ commit }) { const posts = await this.$axios.$get('https://~/wp-json/wp/v2/posts?_embed&tags=6') // 3. アクションで取得したデータを状態に反映させるためにミューテーションを実行する（commit）。 commit('setPosts', { posts }) } }
<template> // 6. 変更されたステートに基づいてコンポーネントが画面を表示（Render）。 <div>{{ posts }}</div> </template> <script> import { mapGetters } from 'vuex' export default { async asyncData({ store }) { // 1. コンポーネントがWebページの更新をするためにアクションを実行する（dispatch）。 await store.dispatch('fetchPosts') }, computed: { ...mapGetters(['posts']) }, } </script>
今回は、直接stateからデータを取得するのではなく、gettersを経由して取得している。
state
getters
順番がかなり前後しているが、このような流れを意識してVuexストアを記述すると初めてうまくいった。
コードが複雑なればなるほど、頭の中でイメージを膨らませるのでが大切で、頭の中で整理できないものは実際に図などに落とし込みをするのがいいなと感じた。
本日の復習 1$route と$routerの違いについて学習しました。 →$routeは現在のページの状況を取得することができる。 →つまり$routerは/hogehoge/:idのidなど動的な物を取得する際に使用する。 →$routerはページ遷移の際に使用するものである
https://v3.vuejs.org/guide/migration/keycode-modifiers.html Vue2系では <input @keyup.13="submit" /> のようにキーコードを指定してメソッドを発火させることができたのですが 同じことをVue3系でやろうとすると 'KeyboardEvent.keyCode' modifier on 'v-on' directive is deprecated. Using 'KeyboardEvent.key' instead vue/no-deprecated-v-on-number-modifiers Lintの設定によってはエラーになってしまいます。 これはkeyCodeが非推奨になったためです。 Vue3系ではキーコードを直接使用せずにエイリアスを使うことが推奨されています。 先程の例だとkeyCodeの13はenterの入力なので 以下のように書いてあげるとLintで怒られなくなります <input @keyup.enter="submit" /> ちなみにエイリアスの記法はケバブケースになります // GOOD <input @keyup.page-down="submit" /> // BAD <input @keyup.pageDown="submit" /> input type="number"でeを入力できないようにする inputタグで数字だけを入力させたいためtypeをnumberにしましたが指数表記のeも入力できてしまいます Vue2系であればeのキーコード69をpreventでもLintに怒られませんでしたがVue3では怒られてしまいます <input type="number" @keydown.69.prevent> そのため69ではなくeを使用するかメソッド内で数字を判定してあげる必要があります <input type="number" @keydown.e.prevent> // もしくは <input type="number" @keydown="checkNumber"> ... methods: { checkNumber (input) { if (!input.key.match(/[0-9]/)) input.preventDefault() } }
https://v3.vuejs.org/guide/migration/keycode-modifiers.html
Vue2系では
<input @keyup.13="submit" />
のようにキーコードを指定してメソッドを発火させることができたのですが 同じことをVue3系でやろうとすると
'KeyboardEvent.keyCode' modifier on 'v-on' directive is deprecated. Using 'KeyboardEvent.key' instead vue/no-deprecated-v-on-number-modifiers
Lintの設定によってはエラーになってしまいます。 これはkeyCodeが非推奨になったためです。
Vue3系ではキーコードを直接使用せずにエイリアスを使うことが推奨されています。 先程の例だとkeyCodeの13はenterの入力なので 以下のように書いてあげるとLintで怒られなくなります
<input @keyup.enter="submit" />
ちなみにエイリアスの記法はケバブケースになります
// GOOD <input @keyup.page-down="submit" /> // BAD <input @keyup.pageDown="submit" />
inputタグで数字だけを入力させたいためtypeをnumberにしましたが指数表記のeも入力できてしまいます
Vue2系であればeのキーコード69をpreventでもLintに怒られませんでしたがVue3では怒られてしまいます
e
69
<input type="number" @keydown.69.prevent>
そのため69ではなくeを使用するかメソッド内で数字を判定してあげる必要があります
<input type="number" @keydown.e.prevent> // もしくは <input type="number" @keydown="checkNumber"> ... methods: { checkNumber (input) { if (!input.key.match(/[0-9]/)) input.preventDefault() } }
高さを取得 html部分 app.vue <template> //高さを取ってきたいとこ <v-app ref="app"> <v-main> <nuxt /> //使うとこ <div class="aaa"/> </v-main> <the-footer /> </v-app> </template> クラス名から要素の高さをとる時 app.vue <script lang="ts"> import Vue from 'vue' export default Vue.extend({ data () { return {} }, mounted () { //appがクラス名 //変数appHeightに取得した高さを代入 const appHeight = this.$refs.app.$el.clientHeight //css変数(--height)に代入 document.documentElement.style.setProperty('--height', `${appHeight}px`) } }) </script> 取ってきた要素の高さを使う時 app.vue <style lang="scss"> .aaa { //ここで使う height: var(--height, 100vh); background-color: red; } </style>
html部分
<template> //高さを取ってきたいとこ <v-app ref="app"> <v-main> <nuxt /> //使うとこ <div class="aaa"/> </v-main> <the-footer /> </v-app> </template>
クラス名から要素の高さをとる時
<script lang="ts"> import Vue from 'vue' export default Vue.extend({ data () { return {} }, mounted () { //appがクラス名 //変数appHeightに取得した高さを代入 const appHeight = this.$refs.app.$el.clientHeight //css変数(--height)に代入 document.documentElement.style.setProperty('--height', `${appHeight}px`) } }) </script>
取ってきた要素の高さを使う時
<style lang="scss"> .aaa { //ここで使う height: var(--height, 100vh); background-color: red; } </style>
今後はSPAにも挑戦していこうと思い、勉強を始めた。 見たことない書き方だったためメモ。 web.php Route::get('/{any?}', function () { return view('welcome'); })->where('any','^(?!api\/)[\/\w\.-]*'); //laravel側ではルーティングはこれだけ welcome.blade.php <!DOCTYPE html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Laravel</title> <!-- Fonts --> <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet"> <link rel="stylesheet" href="{{ asset('css/app.css') }}"></link> <script src="{{ asset('js/app.js') }}" defer></script><!-- 忘れがちなので気をつける --> <!-- Styles --> </head> <body> <div id="app"> <index></index> </div> </body> </html> components/Index.vue <template> <div><!-- ナビゲーション --> <nav class="navbar bg-white border-bottom navbar-light navbar-expand-lg"> <router-link class="navbar-brand mr-auto" :to="{name: 'home'}">Laravel</router-link><!-- VueRouterのホームに戻るリンク --> <ul class="navbar-nav"> <li class="nav-item"> <router-link class="nav-link"> Basket </router-link> </li> <li class="nav-item"> <router-link class="nav-link">Register</router-link> </li> <li class="nav-item"> <router-link class="nav-link">Sign-in</router-link> </li> </ul> </nav> <!-- ページによって画面が変わる場所 --> <div class="container mt-4 mb-4 pr-4 pl-4"> <router-view></router-view><!-- VueRouter --> </div> </div> </template> routes.js import VueRouter from "vue-router"; import Bookables from "./bookables/Bookables";//pageに使うコンポーネントをここで読み込む const routes = [ { path: "/", //pathが"/"の時に component: Bookables, //Bookablesコンポーネントを読み込んでIndex.vueの<router-view></router-view>に反映 name: "home", //<router-link :to="{name: 'home'}">Laravel</router-link>をクリックするとpath"/"へ移動(Bookablesコンポーネントを表示) //なお、<router-link to="/">Laravel</router-link>でも同じ }, ]; const router = new VueRouter({ routes, mode: "history",//これがない場合、「https://qiita.com/#～」というURLになる。#は邪魔な人はこれを忘れない }); export default router; app.js require('./bootstrap'); window.Vue = require('vue'); import router from "./routes"; import VueRouter from "vue-router"; import Index from "./components/Index" // Vue.component('example-component', require('./components/ExampleComponent.vue').default);//グローバル登録なのでvueファイルやJSファイルのどこでも使いまわせる Vue.use(VueRouter);//VueRouterを使いますという宣言 const app = new Vue({ el: '#app', router,//忘れずに components: { 'index': Index }, }); SPAなのでlaravel側のルーティングがwelcome.balde.phpのみなのも当たり前といえば当たり前。 "/"以降は何が入ってもwelcome.blade.phpを返すよという意味だろう。 {any}の後の?がパラメーターがあってもなくてもという意味になるらしい。 しかしながら、その後のwhereを書くことによって受け入れるパラメーターの値を決めれるらしいく、 書き方によっては文字列しか受け入れなかったりするようだ。 なお正規表現は読めないが、おそらく今回は/apiだけ弾く設定だと思われる。 VueRouterはまた違う記事で触れようと思う。
今後はSPAにも挑戦していこうと思い、勉強を始めた。 見たことない書き方だったためメモ。
Route::get('/{any?}', function () { return view('welcome'); })->where('any','^(?!api\/)[\/\w\.-]*'); //laravel側ではルーティングはこれだけ
<!DOCTYPE html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Laravel</title> <!-- Fonts --> <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet"> <link rel="stylesheet" href="{{ asset('css/app.css') }}"></link> <script src="{{ asset('js/app.js') }}" defer></script><!-- 忘れがちなので気をつける --> <!-- Styles --> </head> <body> <div id="app"> <index></index> </div> </body> </html>
<template> <div><!-- ナビゲーション --> <nav class="navbar bg-white border-bottom navbar-light navbar-expand-lg"> <router-link class="navbar-brand mr-auto" :to="{name: 'home'}">Laravel</router-link><!-- VueRouterのホームに戻るリンク --> <ul class="navbar-nav"> <li class="nav-item"> <router-link class="nav-link"> Basket </router-link> </li> <li class="nav-item"> <router-link class="nav-link">Register</router-link> </li> <li class="nav-item"> <router-link class="nav-link">Sign-in</router-link> </li> </ul> </nav> <!-- ページによって画面が変わる場所 --> <div class="container mt-4 mb-4 pr-4 pl-4"> <router-view></router-view><!-- VueRouter --> </div> </div> </template>
import VueRouter from "vue-router"; import Bookables from "./bookables/Bookables";//pageに使うコンポーネントをここで読み込む const routes = [ { path: "/", //pathが"/"の時に component: Bookables, //Bookablesコンポーネントを読み込んでIndex.vueの<router-view></router-view>に反映 name: "home", //<router-link :to="{name: 'home'}">Laravel</router-link>をクリックするとpath"/"へ移動(Bookablesコンポーネントを表示) //なお、<router-link to="/">Laravel</router-link>でも同じ }, ]; const router = new VueRouter({ routes, mode: "history",//これがない場合、「https://qiita.com/#～」というURLになる。#は邪魔な人はこれを忘れない }); export default router;
require('./bootstrap'); window.Vue = require('vue'); import router from "./routes"; import VueRouter from "vue-router"; import Index from "./components/Index" // Vue.component('example-component', require('./components/ExampleComponent.vue').default);//グローバル登録なのでvueファイルやJSファイルのどこでも使いまわせる Vue.use(VueRouter);//VueRouterを使いますという宣言 const app = new Vue({ el: '#app', router,//忘れずに components: { 'index': Index }, });
SPAなのでlaravel側のルーティングがwelcome.balde.phpのみなのも当たり前といえば当たり前。 "/"以降は何が入ってもwelcome.blade.phpを返すよという意味だろう。 {any}の後の?がパラメーターがあってもなくてもという意味になるらしい。 しかしながら、その後のwhereを書くことによって受け入れるパラメーターの値を決めれるらしいく、 書き方によっては文字列しか受け入れなかったりするようだ。 なお正規表現は読めないが、おそらく今回は/apiだけ弾く設定だと思われる。 VueRouterはまた違う記事で触れようと思う。
