Vue.js Vuexで状態を管理する （値の設定)

前回(https://www.mkhs.work/wordpress2/?p=213)では storeで設定した値を返すサンプルを作成しました。今回は値を設定するサンプルです。値の管理はstore側で実施していますので、store.jsに設定します。counterを増やすサンプルです。mutationsを定して、counterを増やす、クリアするオブジェクト定義をします。

import { createStore } from 'vuex'

export const store = createStore({
    state() {
        return{
            message: 'store dataです!!',
            counter: 0,
        }
    },
    mutations: {
        count_plus: (state) => {
            state.counter++
        },
        count_reset:(state) => {
            state.counter = 0
        }
    },
})

store.jsを呼び出すコンポーネントのサンプルです。

<template>
  <div class="alert alert-primary">
    <p> {{ $store.state.message }}</p>
  </div>
  <div class="btn btn-secondary" v-on:click="$store.commit('count_plus')" v-on:ctrl="$store.commit('count_reset')">
    <a class="h5">
      clicked: {{ $store.state.counter }}
    </a>
  </div>
</template>

<script>
  import {reactive} from 'vue'

  export default {
    setup(){
      const data = reactive({
      })
      return {
        data
      }
    }
  }
</script>

ブラウザで動作確認します。

値は永続化されていないので、リロードするとゼロにクリアされます。