Vue.jsとVuexを使って、TODOアプリを作ってみよう。

Vue.jsとVuexを使って、TODOアプリを作ってみよう。

Vue.jsとVuexを使って、TODOアプリを作ってみよう。 へのコメントはまだありません

前回のカウンターアプリに引き続き、今回はTODOアプリを作ってみようと思います。
基本は、前回お話ししたので、今回は、前回説明してこなかった部分に注力を置いて説明します。

まだVue.jsの初心者をちょっと超えたぐらいですが・・・
まずVue.jsとVuexでアプリを組むには、アプリの全体像をイメージし、
どんな画面で、どんなイベントがあって、どんな値を保持しなければならないかをしっかりと把握する。

画面の絵なんか描くといいかもですね。

で、今回の出来上がりイメージはこんな感じ。

Screen Shot 2018-06-08 at 21.20.11

ページ上部に、新しいTODOを入力する場所があって、追加すると、下に新たなTODOとして表示される。
表示されたTODOの文字をクリックすると、処理済みになり、削除をクリックすると、リストから削除される。
これだけです。

では、Vuexのstore作成いってみましょう!!

値を保持しなければならないものは以下の2つ
・TODOのアイテム全て
・新しいTODOの入力途中の文字

ユーザーの操作でアクションが起こる場所
・追加ボタンで新しいTODOが追加
・TODOの文字列クリックで、処理済み
・削除ボタンで、リストから削除

storeから取得したいもの
・TODOのアイテム全て
・新しいTODOの入力途中の文字

ではまず、mutation-type.jsに定義すべき変数です。

src/store/mutation-type.js

次、storeを定義しましょう。
src/store/todo.js

storeのルートファイル、 modulesに todo も追加しましょう。

次にフロントエンドです。
ちょっとここは説明を加えておきます。
Todoの1つを表すのは Leafコンポーネントです。
mapGettersで取得した todos を v-forでループさせます。
LeafコンポーネントのプロパティにTotoアイテムの1つのデータを引き渡します。

新しいTodoの文字は入力途中のものも全て管理します。
つまり IN/OUT双方向管理です(v-model)。

その場合は computedに xxxx を用意して、そこに
get/set を作ります。

ネストしたストアですが、取得は素直に
this.$store.state.todo.mystring

コミットの方はちょっと工夫します。
this.$store.commit(‘todo/’ + CHANGE_MYSTRING, {data: value})

1つ1つのTODOを表す Leafコンポーネントは componentsで定義しておきます。

src/components/Todo.vue

Leafコンポーネントについて

親から引き渡された プロパティを propsで受けます。
あとは特殊なところといえば、v-bind:class で クラスのオンオフを制御しているところでしょうか。

最後にルートファイルの編集です。

npm run dev して

http://localhost:8080/#/todo

で表示されます。
すごく説明をすっ飛ばしましたが、カウンターアプリのソースの説明を合わせて読むと
理解いただけると思います。

前回のカウンターと今回のTODOアプリのソースを添付します。(vue4th.zip)
ダウンロードして、そのフォルダ内で、npm install すれば使えると思います。


About the author:

Tags:

Related Posts

Leave a comment

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

Back to Top