这里是我创建的store代码

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

//创建仓库
 var  store =new vuex.Store({
   state:{
//定义状态  title属性
     title:"hello world"
   }
 })

//导出创建的仓库
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/>'
})

这是组件使用mapState的笔记

<template>
    <div>
<!--      这里直接输出title 它是mapState中定义的属性title，它的值是store仓库的值-->
      {{title}}

    </div>
</template>

<script>
  //引入vuex提供的辅助函数 mapState  ***抽象形容:mapState是state的语法糖
  //官方的解释：mapState 辅助函数  当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性，让你少按几次键：
  import {mapState} from "vuex"
    export default {
        name: "Home",
      //为什么mapstate写在computed里面呢  computed:计算机属性 当依赖的属性发生改变就会执行
        computed:{
          // ...对象展开运算符 ==>ES6提供的
          ...mapState({
            //第一个title代表当前组件的属性  "title"代表仓库的属性
            title:"title"
          })
        }
    }
</script>

<style  scoped>

</style>

语法就是写的不要问那么多 *那你可以针是一个杠精

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