devtools和vuex mutations

index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 100
  },
  mutations: {
    countAdd(state) {
      state.count++;
    },
    countSub(state) {
      state.count--;
    }
  },
  actions: {

  },
  getters: {

  },
  modules: {

  }
})

export default store

HelloWorld.vue

<template>
  <div class="hello">
    <p>{{$store.state.count}}</p>
    <button type="button" @click="addClick">+</button>
    <button type="button" @click="subClick">-</button>
  </div>
</template>

<script>
  export default {
    name: 'HelloWorld',
    data() {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    },
    methods: {
      addClick() {
        this.$store.commit('countAdd');
      },
      subClick() {
        this.$store.commit('countSub');
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>