田無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ファイル)の作成を行う
動くところまで持っていけた! 今日はここまで