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>

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


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