Vue3がやりたくてLocalStorageを使った簡単レジスター作ってみた
前略、そんなことより宝くじを当ててアーリーリタイアしたいです。
Vue3を使ってみたかったので公式ドキュメントやらを見ていたら、Vue2のドキュメントにLocalStorageを使ったTodoAppの手引き(TodoMVC の例)が載っていたので、そのまま作っても面白くないなと思い、超簡易的なレジスターを作ってみました。
もしかしたら今後「Vue3とLocalStorageを使ってレジスター作りてぇ！」と街中で叫ぶ人が出てくるかもしれないので、備忘録として残しておきます。
概要
完成品など
公開URL
ソースコード
使ってみたもの
- Vue3.2.13
- LocalStorage
LocalStorageって5MBも使えるらしいです。
たくさん使えて幸せです。
ホスティング
- Netlify
GitHubのmasterブランチを勝手にデプロイしてくれるらしく、サーバー借りるのも面倒だったのでやってみました。
設定方法とかやり方とかはN番煎じなので書きません。
科学ってすげー。
つまづいたところ
高さ可変だとうまくscrollが表示されない
とにかく画面1枚の中にすべてを詰め込みたかったので、親要素が高さ可変の場合にItemListがoverflowしてもscrollできるようにしたかったのですが、普通にそのままはみ出して表示されてしまいました。
偉大な先人たちがこんな解決法を提示してくれたので、まんまパクりつつ、max-heightをcalc()で地道に計算して定義したりして解決しました。
はー、完全に理解した。
子コンポーネントでpropsのitemList配列を編集しようとしたら怒られた
propsを親子間であれやこれやとやるのはVue的には嫌らしい。
Vue3から.sync修飾子が使えるようになり、$emitを使用して親コンポーネントにpropsの変化を知らせることはできるようになったが、私の環境ではなぜか.syncを使うと怒られる。
eslintが邪魔をしているみたいだけど、どうやって設定を変えればいいのか分からないので、面倒になってitemList.vueというコンポーネントをなくして、全部App.vueに書き込んだ。
はー、なんも分からん。
追加したい機能とやりたいこと
追加したい機能
- 今のeditモードだと削除しかできないので、アイテムごとに名前、価格、在庫を全部編集できるようにしたい
- もっとtransitionアニメをつけて、ふわっと出てくる感じにしたい
- substock履歴もlocalstorageに残して、履歴を見られるようにしたい
- 金庫内の金額が一瞬で分かるように、subtotalの下にtotalを入れたい
- 完全にオフラインで使える状態にしたい
やりたいこと
- やっぱりコンポーネントは分けたい。全部App.vueに書いたことで、Vue3の良さを全部なくした伝説の男になってしまった。(Vuexとか使えばもっと簡単に親子コンポーネント間のやり取りができそう)
- FireStoreとか使って、クラウドDBを使ったなにかを作りたい
今日は眠いのでここまで。
またあとで追記するかも。
Discussion