Vuexの使いかた

具体的な利用方法の備忘録

概念理解はこちら参照

state

■ Vue.store

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    message: "hogehogeMAX"
  },
  mutations: {
  },
  actions: {
  },
  getters: {
  }
})

■ 呼び出しコンポーネント側

<template>
  <div>
    {{ $store.state.message }} ===> hogehogeMAXと表示される
  </div>
</template>

mutation

mutationsは第一引数でstate、第二引数ではコミット時に受け取る引数payload mutationsのコミットは直接各コンポーネントから実行することもできますが、基本的にコンポーネントでの操作はactionsで行うことが推薦されています。 mutationsはあくまでもストアの状態の変更だけを行う。mutationsの呼び出しはactionsが行う。

■ Vue.store

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    counter: 0,
  },
  mutations: {
    increment(state) {
      state.counter++
    }
  },
  actions: {
  },
  getters: {
  }
})

■ 呼び出しコンポーネント側

<template>
  <div>
    {{ $store.state.counter }}
    <button @click="increment">increment</button> <===== ここのボタンが押されるたびにカウントがプラス１される
  </div>
</template>

<script>
export default {
  methods: {
    increment() {
      this.$store.commit('increment')　<==== Vue.storeのmutationのincrement(state)をコミットしている
    }
  }
}
</script>

getter

■ Vue.store

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    cartItems: ['お肉', '魚', 'りんご', 'バナナ',],
  },
  mutations: {
  },
  actions: {
  },
  getters: {
    cartItemsCount(state) {
      return state.cartItems.length
    }
  }
})

■ 呼び出しコンポーネント側

<template>
  <div>
    {{ cartItemsCount }} <=== 算出プロパティを呼び出す-> 4が表示される
  </div>
</template>

<script>
export default {
  computed: {
    cartItemsCount() {
      return this.$store.getters.cartItemsCount　<=== Vue.storeのcartItemsCountメソッドが呼ばれる
    }
  }
}
</script>

actions

■ Vue.store

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    counter: 0,
  },
  mutations: {
    increment(state, payload) {
      state.counter += payload
    }
  },
  // mutationsをコミットする
  // 非同期の処理を記述することも可能
  actions: {
    increment(context, payload) {
      setTimeout(() => {
        context.commit('increment', payload);
      }, 1000)
    }
  },
  getters: {
  }
})

■ 呼び出しコンポーネント側

<template>
  <div>
    {{ $store.state.counter }}
    <button @click="increment">increment</button> <===== ここのボタンが押されるたびに1秒後にカウントがプラス１00される
  </div>
</template>

<script>
export default {
  methods: {
    increment() {
      this.$store.dispatch('increment', 100) <==== this.$store.dispatch('アクション名')でactionsを実行できます。
    }
  }
}
</script>