先来个极简版本的按钮计数器

如官网所述，状态更改方法写在store里

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

const store= new Vuex.Store({
  state: {
    count:0
  },
  mutations: {
    increment(state){
      state.count++
    },
    decrement(state){
      state.count--
    }
  },
});
export default store

在页面上用$store.commit()去使用方法

<template>
  <div>
    <h1>我是组件</h1>
    <button @click="$store.commit('increment')">+</button>
    <span>{{$store.state.count}}</span>
    <button @click="$store.commit('decrement')">-</button>
     </div>
</template>

<script>
import store from '../store'
export default {
  store,
  name:"HelloWorld",
  data(){
    return{
      count:0
    }
  },
}

效果图