今まで作ってきたTODO管理アプリに、Vuexを適用してみた。Vuexの難しかったところは次に書くとして、ここまでで出来たSPAの画面を紹介する。

トップ画面

トップ画面では、TODO一覧が表示される。 Vue.js todo

新規作成画面

新規作成ボタンを押すと、新規作成画面に行く。
「Macを買う」を記入したところ。 Vue.js todo

作成ボタンを押した後、確認画面が表示される。 Vue.js todo

OKを押すと、タスクが追加された状態で、トップページ(TODO一覧)が表示される。
戻るを押すと、前の新規作成画面に戻ることができる。 Vue.js todo

編集画面

トップページ(TODO一覧)で「編集」リンクを押すと、編集画面でタスクを編集することが可能。「宿題をする」を「国語の宿題をする」に変更した。 Vue.js todo

「編集完了」ボタンを押して、トップページに戻ってきたところ。 Vue.js todo

ソースコード

ソースコードは以下の通り。
Sample/Vue.js/todo_vue/src at a897a499404dee6a60af0ddb44d37338396b75f1 · eiKatou/Sample