やったこと
Vuex を使ってみます。
確認環境
Console Log
Vue.version
2.6.10
Vuex.version
3.1.1
調査
構成要素
- ステート (state)
- ゲッター (getter)
- ミューテーション (mutation)
- アクション (action)
処理は下記の流れで行われます。
アクション -> ミューテーション -> ステート -> ゲッター
実装例
sample.vue
<template>
<p>template</p>
</template>
<script>
/* eslint-disable */
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
// ステート
state: {
count: 1
},
// ミューテーション
mutations: {
double (state) {
state.count *= 2
},
minus (state) {
state.count *= -1
}
},
// ゲッター
getters: {
mycount (state) {
return state.count
}
},
// アクション
actions: {
minusAction (ctx) {
// ミューテーション呼び出し
ctx.commit('double')
ctx.commit('minus')
}
}
})
console.log('init')
console.log(store.getters.mycount)
store.dispatch('minusAction')
console.log(store.getters.mycount)
export default {
// エラーが出ないように記述
data () {
return {}
}
}
/* eslint-enable */
</script>
起動
$ vue serve sample.vue --open
出力結果
init
1
-2