Vuex data increase

Reference article: Click event to get. There is no parent-child component here, it's not that complicated.

Purpose: Click to get input and increase the shared value of state in Vuex.
Requirement: 点击事件--mutation--stateChange the value by means.

// App.vue
<template>
  <div id="app">
    <h4>{
   
   {$store.state.counter}}</h4>
    <input
      type="text"
      @input="getInput"
    >
    <button @click="clickAdd()">增加数量</button>
  </div>
</template>

<script>
import {
     
      INCRECOUNT } from "./store/mutation-types";
export default {
     
     
  name: "App",
  components: {
     
     },
  data() {
     
     
    return {
     
     
      addNum: 1
    };
  },
  methods: {
     
     
    clickAdd() {
     
     
      this.$store.commit({
     
     
        type: INCRECOUNT,
        count: this.addNum,
      });
    },
    getInput(event) {
     
     
      this.addNum = event.target.value;
    },
  },
};
</script>

<style>
</style>

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import Mutation from './mutations'
import {
    
    INCRECOUNT} from './mutation-types'

Vue.use(Vuex)

export default new Vuex.Store({
    
    
  state:{
    
    
    counter: 0
  },
  mutations: {
    
    
	[INCRECOUNT](state, payload){
    
    
      console.log(payload.count)
      state.counter += parseFloat(payload.count);
    }
  },
  actions:{
    
    },
  getters:{
    
    },
  modules:{
    
    }
});