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

トップ画面

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

新規作成画面

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

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

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

編集画面

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

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

ソースコード

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