Vuex を使ってみる
Vue.js Vuex
Published: 2019-11-05

やったこと

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

参考