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

2018年6月8日 No Comments

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

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

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

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

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

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

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

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

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

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

src/store/mutation-type.js
[bash]
export const ADD_TODO = ‘ADD_TODO’
export const DONE_TODO = ‘DONE_TODO’
export const REMOVE_TODO = ‘REMOVE_TODO’
export const GET_TODOS = ‘GET_TODOS’
export const CHANGE_MYSTRING = ‘CHANGE_MYSTRING’

[/bash]

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

[bash]
import { ADD_TODO, DONE_TODO, REMOVE_TODO, CHANGE_MYSTRING, GET_TODOS } from ‘./mutation-type’

const todo = {
namespaced: true,
state: {
items: [],
mystring: ”
},
actions: {
[ADD_TODO] ({commit, state, rootState}, newValue) {
let newItem = {
todo: newValue,
is_done: false
}
commit(ADD_TODO, {data: newItem})
commit(CHANGE_MYSTRING, {data: ”})
},
[DONE_TODO] ({commit, state, rootState}, selItem) {
commit(DONE_TODO, {data: selItem})
},
[REMOVE_TODO] ({commit, state, rootState}, selItem) {
commit(REMOVE_TODO, {data: selItem})
}
},
mutations: {
[ADD_TODO] (state, payload) {
state.items.push(payload.data)
},
[DONE_TODO] (state, payload) {
state.items.map(it => {
if (it.todo == payload.data.todo){
it.is_done = !it.is_done
}
})
},
[REMOVE_TODO] (state, payload) {
for (let i = 0; i < state.items.length; i++){ if (state.items[i].todo == payload.data.todo){ state.items.splice(i, 1) break } } }, [CHANGE_MYSTRING] (state, payload) { state.mystring = payload.data } }, getters: { [GET_TODOS] (state, getters, rootState) { return state.items } } } export default todo [/bash] storeのルートファイル、　modulesに todo も追加しましょう。 [bash] import Vue from 'vue' import Vuex from 'vuex' import counter from './counter' import todo from './todo' Vue.use(Vuex) const store = new Vuex.Store({ modules :{ 'counter': counter, 'todo': todo, } }) export default store [/bash] 次にフロントエンドです。ちょっとここは説明を加えておきます。 Todoの１つを表すのは Leafコンポーネントです。 mapGettersで取得した　todos を v-forでループさせます。 LeafコンポーネントのプロパティにTotoアイテムの１つのデータを引き渡します。新しいTodoの文字は入力途中のものも全て管理します。つまり　IN/OUT双方向管理です（v-model）。その場合は　computedに　xxxx を用意して、そこに get/set を作ります。ネストしたストアですが、取得は素直に this.$store.state.todo.mystring コミットの方はちょっと工夫します。 this.$store.commit('todo/' + CHANGE_MYSTRING, {data: value}) １つ１つのTODOを表す Leafコンポーネントは　componentsで定義しておきます。 src/components/Todo.vue [bash]

[/bash]

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

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

[bash]

[/bash]

最後にルートファイルの編集です。
[bash]
import Vue from ‘vue’
import Router from ‘vue-router’
import HelloWorld from ‘@/components/HelloWorld’
import Counter from ‘@/components/Counter’
import Todo from ‘@/components/Todo’

Vue.use(Router)

export default new Router({
routes: [
{
path: ‘/’,
name: ‘HelloWorld’,
component: HelloWorld
},
{
path: ‘/counter’,
name: ‘Counter’,
component: Counter
},

{
path: ‘/todo’,
name: ‘Todo’,
component: Todo
}

]
})
[/bash]

npm run dev して

http://localhost:8080/#/todo

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

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

About the author:

hiroshi

Tags: Vue.js

Vue.jsとVuexを使って、カウンターアプリを作ってみよう。
2018年6月8日
Vue.js始めました。さっぱりわからなかったのですが、ようやく「いろは」は掴めてきたので、vuexを使ってカウンターアプリを作ってみました。 storeをmoduleで分割して、中規模くらいのアプリなら対応できるような感じに仕上げてみました。とにかく Vuexがややこしいというか、どういう構造で、どう利用するのかが難しい。これに慣れるのが一番のキモです。出来上がりのイメージメチャメチャシンプルですが、こんな感じ。＋＋＋をクリックで、インクリメント、ーーーでデクリメント。現在のカウンターが「５」 Vue.jsインストール [bash] $ npm install -g vue-cli [/bash] sudo をつけた方がいいかもしれません。プロジェクト作成 [bash] $ cd ~/Document $ vue init webpack vue1st [/bash] 質問形式でこれはインストールしますか？など聞かれるので eslintを除いては、すべて Enterキー連打でOKだと思う。 eslint入れると、構文チェックがやたらうるさくなるので、これは「n」で外すのがオススメ。 Vuexインストール [bash] $ cd vue1st $ npm install –Save vuex [/bash] Storeの作成と main.jsへの登録 [bash] $ mkdir src/store $ nano src/store/index.js [/bash] 最初は訳がわからんと思いますので、軽く説明。 Vuexは Vue.jsで作るSPA（シングルページアプリケーション）の全ステートを一括してstoreとして、管理します。まず、Vue.jsとVuexをインポートして使えるようにして、次に Vue.jsからVuexを利用しますよとする。で、アプリで唯一のstoreを作って、そのstoreで利用するmodulesを宣言していきます。ここでは　’counter’: counter の部分です。同一ファイルにしても良いのですが、アプリケーションの規模が大きくなると見通しが悪くなるので、ファイルを分割しておきます。で、最後に storeをデフォルト値としてexport。 src/store/index.js [bash] import Vue from ‘vue’ import Vuex from ‘vuex’ import counter from ‘./counter’ Vue.use(Vuex) const store = new Vuex.Store({ modules :{ ‘counter’: counter, } }) export default store [/bash] main.jsへの登録「＋」となっている行を追記します。 [bash] import Vue from ‘vue’ import App from ‘./App’ import router from ‘./router’ + import store from ‘./store’ Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: ‘#app’, + store, router, components: { App }, template: ‘‘ }) [/bash] カウンターのストアを作成ここが多分一番難しい。カウンターアプリの要件は、１.現在のカウンター値を取得できる２.カウンターをインクリメントできる３.カウンターをデクリメントできるストアに保持するべき値は、カウンター値１つのみ。この条件が揃ったところで、 src/store/mutation-type.jsを作りましょう。 mutationとは変化するという意味。カウンターアプリで、Vuexでいうと、カウンターを増減させることが mutation これを定数定義します。で、変化ではありませんが、現在のカウンターの値を取得する部分も定数定義してしまいましょう。（厳密にはmutationではないが、ファイルが分かれるとややこしいのでまとめます。） src/store/mutation-type.js [bash] export const INCREMENT_COUNTER = ‘INCREMENT_COUNTER’ export const DECREMENT_COUNTER = ‘DECREMENT_COUNTER’ export const GET_COUNTER = ‘GET_COUNTER’ [/bash] では、この定数を使って、カウンターのStoreを作っていきましょう。これが非常に慣れるまで難しい。。。最初のconst宣言と、namespacedはお決まりなので、こんな感じなんだなと覚える。次のstate/actions/mutations/getters ここが難しい！！その中でもstateはシンプル。このストアで保持したい変数を定義する場所。カウンターアプリなので保持するのはカウンターの値一個。それを定義して、初期値をセットします。 actionsはこれからstateの値を変更するんだけど、その前処理をする場所、ぐらいに捉えておくと良い。基本、画面上からのユーザー操作と結びつく場所だと考えてください。で、actionで何らかの前処理をして、mutationをコミットします。 mutationで実際のストアの値を書き換えます。mutationを呼び出すときに、必要なデータなどもセットしてやります。（今回の場合、カウンターなので必要なデータはない）あ、で、変な書き方なのが、actionsの関数宣言。定数を[定数]　としてやると関数名として利用できるので、それを利用してます。加えて加えて、Vueファイルから、　mapActionsとして、呼び出し可能になります。 mutationは純粋に引数の stateと、payloadを使って、実際のstateで保持されている値を書き換える処理をします。 mutation自体は直接呼び出されることはなく、action経由などで、commitされて呼び出されます。最後、getters これは、storeの値を読み出すための場所。これを定義しておくと、Vueファイルから mapGettersでストア情報を読み出せます。 [bash] import {INCREMENT_COUNTER, DECREMENT_COUNTER, GET_COUNTER} from ‘./mutation-type’ const counter = { namespaced: true, state: { counter_value: 0 }, actions: { [INCREMENT_COUNTER] ({commit, state, rootState}) { commit(INCREMENT_COUNTER, {}) }, [DECREMENT_COUNTER] ({commit, state, rootState}) { commit(DECREMENT_COUNTER, {}) } }, mutations:{ [INCREMENT_COUNTER] (state, payload) { state.counter_value += 1 }, [DECREMENT_COUNTER] (state, payload) { state.counter_value -= 1 } }, getters:{ [GET_COUNTER] (state, getters, rootState) { return state.counter_value } } } export default counter [/bash] フロントエンドの作成拡張子vueファイルは３つの部分で構成されます。・レンダリングされる html ・実行するスクリプト・CSS CSSは普通のHTMLと同じなので、最初の２つについて説明していきます。 [bash] This is Counter App {{counter}} +++ — [/bash] テンプレート何らかの変数値を表示したいところは {{変数名}} と２重括弧でくくってとします。 @clickなどはイベント処理を記述する場所で、不思議な構文なのですがダブルコーテーションで methodsの中に定義された関数名を文字として定義します。関数に引数がある場合も、全部文字として記述しちゃう感じです。（ちょっと変わってますね・・・・…