[vue.js]store データ保存

pages/index.vue

<template>
  <div class="container">
    <h2>{{ title }}</h2>
    <p>{{ msg }}</p>

    <!-- route link -->
    <hr>
    <router-link to="/other">go to other page</router-link>
    <pre>[{{now}}]</pre>

    <!-- store deprecated from Nuxt3 -->
    <hr>
    <p>get store</p>
    <p>{{$store.state.message}}</p>
    <br>
    <p>store.cnt = {{$store.state.cnt}}</p>
    
    <p>[store]</p>
    <button v-on:click="doClick">count++</button>

    <!-- mutation -->
    <hr>
    <p>[mutation] count up </p>
    <!-- <button @click="$store.commit('count_up')">count up.</button>   -->
    <!-- <button v-on:click="doCountUp">count up.</button>   -->
    <!-- <button @click="doCountUp">count up.</button>   -->
    <button 
      @click.right.prevent="$store.commit('count_n_plus',1)"
      @click.left="$store.commit('count_n_plus',2)">
      count N up.
    </button>  

    <p>[mutation] clear count </p>
    <button v-on:click="doCountClear">count clear.</button>  
    <!-- <button @click="doCountClear">count clear.</button> -->

    <p>[mutation] set object </p>
    <button @click="$store.commit({type:'set_obj',message:'new message!',num:1})">set object</button>


    <!-- actions -->
    <hr>
    <p>[actions] actions </p>
    <button @click="$store.dispatch('do_action')">call run_action</button>

  </div>
</template>

<script>
import Logo from '~/components/Logo.vue'

export default {
  components: {
    Logo,
  },
  created: function(){
    setInterval( ()=>{
      var d = new Date();
      this.now = d.getHours()+':'+d.getMinutes()+':'+d.getSeconds();
    }, 1000);
  },
  data:function(){
    return {
      title: 'Hello',
      msg: 'this is msg',
      now: 'waiting...',
    };
  },
  methods: {
    doClick: function(){
      console.log('doClick');
      this.$store.state.cnt++;
    },
    doCountUp: function(){
      this.$store.commit('count_up')
    },
    doCountClear: function(){
      this.$store.commit('count_clear')
    }
  }
};
</script>

<style>
p{
  padding:5px;
}
pre{
  padding:5px;
}
.container {
  margin: 0 auto;
  padding:40px;
  /* min-height: 100vh;
  justify-content: center;
  align-items: center;
  text-align: center; 
  display: flex; */
}

.title {
  font-family: 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  display: block;
  font-weight: 300;
  font-size: 100px;
  color: #35495e;
  letter-spacing: 1px;
}

.subtitle {
  font-weight: 300;
  font-size: 42px;
  color: #526488;
  word-spacing: 5px;
  padding-bottom: 15px;
}

.links {
  padding-top: 15px;
}
</style>