这里是store的代码

//  引入Vue构造函数
import Vue from "vue"
//引入 vuex
import vuex from  "vuex"
//将vuex挂载到vue
Vue.use(vuex);

//创建仓库
 var  store =new vuex.Store({
   //定义状态
   state:{
     title:"萝卜头",
   },
   //mutations定义同步操作的方法
   mutations:{
     //定义改变title的方法
     fn(state,val){  //state：代表store的state  val代表组件传递的值
        state.title=val
     }
   }

 })

//导出创建的仓库
export default store

这里是main.js文件的代码

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false
//引入 创建的store仓库
import store from "./store";

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  //将store挂载到vue
  store,
  components: { App },
  template: '<App/>'
})

这里是组件的代码

<template>
    <div>
<!--      这里给 mark添加一个点击事件 调用一个方法 方法传递的参数是字符串：'爆炸头'-->
        <mark @click="fn('爆炸头')">点击有惊喜</mark>
<!--      这里查看store的title状态值-->
      <p>造型：{{this.$store.state.title}}</p>
    </div>
</template>

<script>
  // mapMutations 辅助函数
  //你可以在组件中使用 this.$store.commit('xxx') 提交 mutation，或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用（需要在根节点注入 store）。
  import {mapMutations} from "vuex"
    export default {
        name: "Home",
      //在methods使用  mapMutations辅助函数
        methods:{
          //这里的mapMutations的fn指的是store的fn
          ...mapMutations(["fn"])
        }
    }
</script>
<style  scoped>
</style>

官方文档的地址：
https://vuex.vuejs.org/zh/guide/mutations.html