概要
- Vue.js + Vuex を使用して「+」「-」ボタンで数値が増減するカウンターを作成する
今回の環境
- Vue.js 2.6.1
- Vuex 3.1.3
Vuex とは
Vuex は Vue.js アプリケーションのための 状態管理パターン + ライブラリです。 これは予測可能な方法によってのみ状態の変異を行うというルールを保証し、アプリケーション内の全てのコンポーネントのための集中型のストアとして機能します。
Vuex は 単一ステートツリー (single state tree) を使います。つまり、この単一なオブジェクトはアプリケーションレベルの状態が全て含まれており、"信頼できる唯一の情報源 (single source of truth)" として機能します。これは、通常、アプリケーションごとに1つしかストアは持たないことを意味します。
Vuex アプリケーションの中心にあるものはストアです。"ストア" は、基本的にアプリケーションの 状態（state） を保持するコンテナです。単純なグローバルオブジェクトとの違いが 2つあります。
Vuex ストアはリアクティブです。Vue コンポーネントがストアから状態を取り出すとき、もしストアの状態が変化したら、ストアはリアクティブかつ効率的に更新を行います。
ストアの状態を直接変更することはできません。明示的にミューテーションをコミットすることによってのみ、ストアの状態を変更します。これによって、全ての状態の変更について追跡可能な記録を残すことが保証され、ツールでのアプリケーションの動作の理解を助けます。
Vue.js + Vuex によるカウンターのサンプルコード
以下の HTML を Web ブラウザで読み込むと「+」「-」ボタンと数値が増減するカウンターが表示される。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue.js + Vuex ぽちぽちカウンターサンプル</title>
</head>
<body>
<div id="app">
<p>{{ count }}</p>
<p>
<button @click="increment">+</button>
<button @click="decrement">-</button>
</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script src="https://unpkg.com/vuex@3.1.3/dist/vuex.js"></script>
<script>
// カウンターの値を管理するストア
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
// increment: state => state.count++
increment() {
console.log('Call the mutations increment')
this.state.count++
},
// decrement: state => state.count--
decrement() {
console.log('Call the mutations decrement')
this.state.count--
}
}
})
new Vue({
el: '#app',
computed: {
count () {
return store.state.count
}
},
methods: {
// 「+」ボタンクリック時に呼ばれる
increment() {
console.log('Call the methods increment')
// mutations の increment を呼び出す
store.commit('increment')
},
// 「-」ボタンクリック時に呼ばれる
decrement() {
console.log('Call the methods decrement')
// mutations の decrement を呼び出す
store.commit('decrement')
}
}
})
</script>
</body>
</html>