田無rb#3

前回に引き続き Vue.js&Nuxt.js超入門 の続きをやっていきます

Chapter5 Nuxt.jsにアップグレード！

前回ガッと写経してアプリを作るところまでやったので、気になった点をメモしながら解説部分を読んでいきます

.vueファイルの template 部分

  • 入力フィールドに対して @focus="foo" と記述すると、フォーカスが当たった時に foo を実行する
    • @click="bar" でクリックに対して実行できる
    • @ は v-on の省略記法
  • transition で要素を囲むと、その要素が追加や削除される時にアニメーションを適用したりできる
<template>
  <transition name="del">
    <button v-if="baz != false">delete</button>
  </transition>
</template>

<style>
.del-enter-active, .del-leave-active {
  transition: opacity 5s;
}
.del-enter, .del-leave-to {
  opacity: 0;
}
</style>
  • このサンプルアプリはページネーションを実現するのに span タグのクリックをトリガとして実現している

.vueファイルの script 部分

  • Vuexでモジュールモードを使うときは、ステートは $store.state.モジュール.○○ という形で指定
  • 復習：Vuexのミューテーションを呼び出すためには $store.commit メソッドを実行

Chapter5はここまで

Chapter6 外部サービスを利用しよう！

  • 見出しを見てみたところ axios パッケージを使っての外部連携と、 Firebase を使うとのこと
  • 🤔 外部連携で言うと fetch がデフォルトじゃなかったかなと言う記憶があったので調べてみました

axios

  • インストール方法 $ npm install --save axios
    • 後からインストールもできるけど、プロジェクト生成時にインストールも可能とのこと
    • 実際に新規生成をしてみたところ以下のような選択肢が出現
? Choose features to install (Press <space> to select, <a> to toggle all, <i> to invert selection)
 ◯ Progressive Web App (PWA) Support
 ◯ Linter / Formatter
 ◯ Prettier
❯◯ Axios
  • インポート方法 const axios = require('axios'); と書いてある。import じゃアカンのかなと思って調べてみたけど、特に優劣は無さそう。好きな方で良いらしい
  • データ取得方法 変数 = await axios.get(アドレス)
    • 返されたオブジェクトの data プロパティにデータが保存されている
    • await は非同期処理を利用する際に用いられる
  • cssの white-space の pre-wrap
  • nuxtアプリ自身の static/README.md の内容を表示させるために let url = "/README.md" と書いていたが NuxtServerError connect ECONNREFUSED 127.0.0.1:80 というエラーが発生
    • let url = "http://localhost:3000/README.md" と書き換えたら動いた
      • 同じサイト内のアクセスなら、ドメイン部分を省略可能と書いてあるけど仕様が変わった感じかな（さっとググったが見つからず）
    • staticディレクトリ以下のファイルは、 http://localhost:3000/README.md のように直接ファイル名を指定してアクセス可能
  • asyncData について
    • 非同期で扱うデータをまとめた管理する関数であり、この中で非同期の値を用意してオブジェクトの形にして返す
      • この返された値は自動で data にマージされる
    • コンポーネントが用意される前に呼び出される
asyncData: async function() {
  ...非同期処理...
  return { 取得した値 }
}

今日はここまで。次はChapter6の JSONデータのサイトを活用しよう から

その他

  • vimでカーソル行を行頭に持ってきたいときは z<enter> or zt

田無rb#2

昨日に引き続き「Vue.js&Nuxt.js超入門」の写経の続きをやっていきます

Section 5-4 メモアプリを作ろう！

アプリ作成に挑戦

データをローカルストレージに保存できるようになったのでメモ書きアプリを作ってみる

できること

  • メモの登録
    • タイトルと内容が登録できる
    • タイトルで検索する機能も兼ねている
  • リスト閲覧
    • ページネーション付き
    • タイトルと作成日時が表示されている
    • タイトルクリックで登録フォームにて編集できる

プロジェクトを作る

npx create-nuxt-app コマンドでプロジェクトを作成 ローカルストレージに値を保存するため rendering mode は spa を指定しておく

$ npx create-nuxt-app memo_app

ディレクトリ移動してサーバ起動

$ cd memo_app
$ npm run dev

store/index.js を作成して、 vuex-persistedstate を使う設定を書いておく

store/memo.js を作成する

メモアプリ用のストアファイル store/memo.js を作成

🤔内容はメモ追加、ページネーション設定、メモ削除のミューテーション定義っぽい感じ

クラシックモードからモジュールモードへ！

ストアには1つのファイル(index.js)に全てのストア関係を記述するクラシックモードと、storeディレクトリの中に複数ファイルを設置し、それぞれに内容を記述するモジュールモードがある

🤔よっぽど小規模のアプリならクラシックモードでいいかもしれないけど、基本モジュールモードが良さそう

クラシックモードは Vuex.Store オブジェクトを返す関数を用意して、export defaut する形

const createStore = () => {
  return new Vuex.Store({
    state: function() {
      return { ... }
    },
    mutation: {
      foo: function(state) {
        ...
      },
    },
  })
}

export default createStore

モジュールモードは Vuex.Store オブジェクトの作成は行わない。ストア関連の情報を個別に export していく形

export const state = () => ({
  ...
})

export const mutations = {
  foo: function(state) {
    ...
  }
}

storeファイル内に複数ファイルに対してこのように記述したら、全て読み込まれ内容をまとめて扱えるようにしてくれるとのこと

memoストアに用意するもの

store/memo.js にはstate、mutationを記述している

  • state:
    • memo: メモを保管するための配列
    • page: 現在表示しているページ数を扱うための数値
  • mutation:
    • insert: メモを追加する処理
    • set_page: 引数の数値をpageステートに設定
    • remove: メモの中から引数に渡されたメモを削除

📝 spliceメソッド - arr.splice(i, 1) といった形で使う - 第一引数で指定したインデックス番号のものから、第二引数の数だけ要素を取り除く

vuex-persistedstate プラグインの導入を行っていなかったのでやっておく

$ npm install vuex-persistedstate

memo.vueを作成する

ここでガッツリコンポーネント(.vueファイル)の作成を行う

動くところまで持っていけた！ 今日はここまで

田無rb#1

勉強の記録をブログに残していこうかなという気持ちになったので（続くかは分かりません！）筆を執ってみました@田無のカフェ

テンションがアゲアゲになるので勉強会っぽいタイトルにしてみましたが、ただ一人でモクモクしているだけです

以前やっていた「Vue.js&Nuxt.js超入門」という本の写経の続きをやっていきます（rbとはなんだったのか）

Chapter5「Nuxt.jsにアップグレード！」の中途半端ところで止まっていたのでその続きから

久しぶりすぎてアプリの起動方法を忘れている。本を遡って以下のコマンドで実行できることを確認

$ npm run dev

それでは読み進めていきやしょう

Section5-3 Vuexによる状態管理

の途中の

アクションを利用する

ミューテーションを実行するためのアクションを利用するとのこと

ミューテーションってなんだっけ…本を遡って確認

stateを直接書き換えるのは推奨されていないからミューテーションという機能を使ってネ

とのこと

このミューテーションを実行するのがアクション アクションの第一引数にはcontextというオブジェクトが渡され、contextのcommitメソッドを使ってミューテーションを実行するらしい

mutations: {
  foo: function(state) {
    ...
  },
  bar: function(state) {
    ...
  }
},
actions: {
  baz: function(context) {
    context.commit('foo');
    context.commit('bar');
  }
}

テンプレートから以下のように呼び出すことができる

<div @click="$store.dispatch('baz')"></div>

複数のミューテーションを一つのアクションから呼び出すように定義できて便利！ということなのかな

値をずっと保持するには？

stateの値はリロードすると消えるからそれをローカルストレージに保持してみましょうという話 vuexに標準でその仕組みはないらしいのでプラグインをインストール

$ npm install vuex-persistedate

vuex-persistedstateとモードについて

ローカルストレージに保存する仕組みのため、サーバサイドレンダリングを使う場合は利用できない Vuexのモードを変更する必要があるとのこと デフォルトではサーバサイドとクライアントサイドどちらのレンダリングにも対応しているがそれをspaモードに書き換え

nuxt.config.js のmodeを指定している行を以下のように書き換え

mode: 'spa',

Vuexでvuex-persistedstateを利用する

store/index.js にて vuex-persistedstate を読み込む設定を追加する 下記コードの importの部分とpluginの部分だけ追記すれば良さそう 手元では他にも一部書き換えている（アクションの部分をミューテーションに書き換えている）けど直接的な影響は無さそう 一部抜粋

import Vuex from "vuex"
import createPersistedState from "vuex-persistedstate"
    
const createStore = () => {
  return new Vuex.Store({
    ...
    plugins: [
      createPersistedState(),
    ],
  })
}

export default createStore

テンプレート側も修正（アクションを呼び出していたのをミューテーションを呼び出す形にする）

<div class="link" @click="$store.commit('doit')">

リロードしても値が保持されたままになっている〜 🎉

今日はここまで