Vue.js始めました。さっぱりわからなかったのですが、ようやく「いろは」は
掴めてきたので、vuexを使ってカウンターアプリを作ってみました。
storeをmoduleで分割して、中規模くらいのアプリなら対応できるような感じに仕上げてみました。
とにかく Vuexがややこしいというか、どういう構造で、どう利用するのかが難しい。
これに慣れるのが一番のキモです。
メチャメチャシンプルですが、こんな感じ。
＋＋＋をクリックで、インクリメント、ーーーでデクリメント。
現在のカウンターが「５」
[bash]
$ npm install -g vue-cli
[/bash]
sudo をつけた方がいいかもしれません。
[bash]
$ cd ~/Document
$ vue init webpack vue1st
[/bash]
質問形式で これはインストールしますか？など聞かれるので
eslintを除いては、すべて Enterキー連打でOKだと思う。
eslint入れると、構文チェックがやたらうるさくなるので、これは「n」で外すのがオススメ。
[bash]
$ cd vue1st
$ npm install –Save vuex
[/bash]
[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]
「＋」となっている行を追記します。
[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]
[/bash]
何らかの変数値を表示したいところは {{変数名}} と２重括弧でくくってとします。
@clickなどはイベント処理を記述する場所で、 不思議な構文なのですが
ダブルコーテーションで methodsの中に定義された関数名を文字として定義します。
関数に引数がある場合も、全部文字として記述しちゃう感じです。
（ちょっと変わってますね・・・・ 個人的な感想）
で、まぁ全てではないと思いますが、フロントで起こったイベントの処理を
ストアに定義された actionに結びつけるのがよくある作業だと思うので・・
ここではINCREMENT_COUNTER、DECREMENT_COUNTERという actionに
結びつけてます。
で、どうやってactionを呼び出すかというと、次に説明する、scriptのセクションで、
mapActions として、これらを定義してやります。
そうすると、フロントから、ストアのactionを呼び出せます。
[bash]
[/bash]
表示系は computedの部分で、mapGetters
イベント処理系は methodsの部分で、 mapActionsとして、ストアのactionに引き渡す。
[bash]
[/bash]
これでめでたく終了で、あとはrouterにカウンター用のページを定義するのみです。
src/router/index.js
[bash]
import Vue from ‘vue’
import Router from ‘vue-router’
import HelloWorld from ‘@/components/HelloWorld’
+ import Counter from ‘@/components/Counter’
Vue.use(Router)
export default new Router({
routes: [
{
path: ‘/’,
name: ‘HelloWorld’,
component: HelloWorld
},
+ {
+ path: ‘/counter’,
+ name: ‘Counter’,
+ component: Counter
+ }
]
})
[/bash]
npm run dev して
ブラウザーで以下のURLにアクセスして、カウンターアプリが起動すればOK。
http://localhost:8080/#/counter
出来上がりのソースツリー
Leave a comment