Vue.jsとVuexを使って、カウンターアプリを作ってみよう。

Vue.jsとVuexを使って、カウンターアプリを作ってみよう。

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

Vue.js始めました。さっぱりわからなかったのですが、ようやく「いろは」は
掴めてきたので、vuexを使ってカウンターアプリを作ってみました。
storeをmoduleで分割して、中規模くらいのアプリなら対応できるような感じに仕上げてみました。
とにかく Vuexがややこしいというか、どういう構造で、どう利用するのかが難しい。
これに慣れるのが一番のキモです。

出来上がりのイメージ

メチャメチャシンプルですが、こんな感じ。
+++をクリックで、インクリメント、ーーーでデクリメント。
現在のカウンターが「5」

Screen Shot 2018-06-08 at 18.44.59

Vue.jsインストール

sudo をつけた方がいいかもしれません。

プロジェクト作成

質問形式で これはインストールしますか?など聞かれるので
eslintを除いては、すべて Enterキー連打でOKだと思う。
eslint入れると、構文チェックがやたらうるさくなるので、これは「n」で外すのがオススメ。

Vuexインストール

Storeの作成と main.jsへの登録

最初は訳がわからんと思いますので、軽く説明。
Vuexは Vue.jsで作るSPA(シングルページアプリケーション)の
全ステートを一括してstoreとして、管理します。
まず、Vue.jsとVuexをインポートして使えるようにして、次に
Vue.jsからVuexを利用しますよとする。

で、アプリで唯一のstoreを作って、そのstoreで利用するmodulesを宣言していきます。
ここでは ’counter’: counter の部分です。
同一ファイルにしても良いのですが、アプリケーションの規模が大きくなると見通しが悪くなるので、
ファイルを分割しておきます。

で、最後に storeをデフォルト値としてexport。

src/store/index.js

main.jsへの登録

「+」となっている行を追記します。

カウンターのストアを作成

ここが多分一番難しい。

カウンターアプリの要件は、
1.現在のカウンター値を取得できる
2.カウンターをインクリメントできる
3.カウンターをデクリメントできる

ストアに保持するべき値は、
カウンター値1つのみ。

この条件が揃ったところで、
src/store/mutation-type.jsを作りましょう。

mutationとは変化するという意味。
カウンターアプリで、Vuexでいうと、
カウンターを増減させることが mutation
これを定数定義します。

で、変化ではありませんが、現在のカウンターの値を取得する部分も
定数定義してしまいましょう。(厳密にはmutationではないが、ファイルが分かれるとややこしいので
まとめます。)

src/store/mutation-type.js

では、この定数を使って、カウンターの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で
ストア情報を読み出せます。

フロントエンドの作成

拡張子vueファイルは3つの部分で構成されます。
・レンダリングされる html
・実行するスクリプト
・CSS

CSSは普通のHTMLと同じなので、最初の2つについて説明していきます。

テンプレート

何らかの変数値を表示したいところは {{変数名}} と2重括弧でくくってとします。
@clickなどはイベント処理を記述する場所で、 不思議な構文なのですが
ダブルコーテーションで methodsの中に定義された関数名を文字として定義します。
関数に引数がある場合も、全部文字として記述しちゃう感じです。
(ちょっと変わってますね・・・・ 個人的な感想)

で、まぁ全てではないと思いますが、フロントで起こったイベントの処理を
ストアに定義された actionに結びつけるのがよくある作業だと思うので・・

ここではINCREMENT_COUNTER、DECREMENT_COUNTERという actionに
結びつけてます。

で、どうやってactionを呼び出すかというと、次に説明する、scriptのセクションで、
mapActions として、これらを定義してやります。
そうすると、フロントから、ストアのactionを呼び出せます。

scriptセクション

表示系は computedの部分で、mapGetters
イベント処理系は methodsの部分で、 mapActionsとして、ストアのactionに引き渡す。

これでめでたく終了で、あとはrouterにカウンター用のページを定義するのみです。

src/router/index.js

npm run dev して
ブラウザーで以下のURLにアクセスして、カウンターアプリが起動すればOK。

http://localhost:8080/#/counter

出来上がりのソースツリー
Screen Shot 2018-06-08 at 20.54.32


About the author:

Tags:

Related Posts

Leave a comment

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

Back to Top