この記事のレベル感
・Vue.jsを使ったWeb開発やアプリを作ったことはあるけどは、Vuexのドキュメントを読んだり、実務で使っていない人
Vuexのstoreとは？
- Vuexアプリの中心
- アプリのstate(状態)を保持するコンテナ
- storeのstateに対しリアクティブかつ効率的な更新を行う
- mutationsをcommitすることでのみstoreのstateを更新できる
Vuexの環境構築
BootStorap等のライブラリ同様、CDNもしくはnpm、yarnで環境を整えられます。
詳しくは[Vuexのインストール]
(https://vuex.vuejs.org/ja/installation.html)をご確認ください。
Vuexのstoreを使用した例
Vuex公式ページにも掲載されているカウンターアプリを例に取ります。
<div id="app">
<p>{{ count }}</p>
<p>
<button @click="increment">+</button>
<button @click="decrement">-</button>
</p>
</div>
カウンターで表示するcountとカウントの値の増減アクションを起こす**@click**イベントを記述します。
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment: state => state.count++,
decrement: state => state.count--
}
})
new Vue({
el: '#app',
computed: {
count () {
return store.state.count
}
},
methods: {
increment () {
store.commit('increment')
},
decrement () {
store.commit('decrement')
}
}
})
new Vuex.Store側ではstateとmutationsを設定します。
stateにはカウンターで表示する値をmutetionsにはカウントの値の増減をstateに反映させます。(素のVueでいうとmethodsで記述していたようなカウントの処理も記述します。)
new Vue側ではstoreで管理するデータを取り出し、HTML viewに反映させます。
感想
これだけ簡易的なアプリであればVuex導入の効果は薄いかと思いますが、コードはかなりシンプルになりますね。