mutationを用いて、storeの値を変更する。

[ShimaBee]

mutationを用いて、counterの値を変更する。

[ShimaBee]

mutationの定義

counterというstateの値を変更する二つのmutationの定義。

store/index.js

export const mutations = {
  //counterの値を+1するmutation
  increment(state){
      state.counter++
  },
  //counterの値を-1するmutation
  decrement(state){
      state.counter--
  }
}

[ShimaBee]

二つのmutationをボタンがクリックされて時に呼び出すための記述

+ボタンが押されたら、incrementを呼ぶ。 @click="$store.commit('increment')"

-ボタンが押されたら、decrementを呼ぶ。 @click="$store.commit('decrement')"

<div class="btn-wrapper d-flex justify-center">
  <v-btn 
    class="mx-5" 
    fab dark 
    color="indigo"
    @click="$store.commit('increment')">
    <v-icon dark>mdi-plus</v-icon>
  </v-btn>

  <v-btn 
    class="mx-5"
    fab dark
    color="indigo"
    @click="$store.commit('decrement')">
    <v-icon dark>mdi-minus</v-icon>
  </v-btn>
</div>

[ShimaBee]

ひとまず完成！！ actionを使ったり、ヘルパーを使ったりは、時間があれば