田無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ファイル)の作成を行う

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