Vuex 专门在 Vue 中实现集中式状态（数据）管理的一个 Vue 插件，对 Vue 应用中多个组件的共享状态进行集中式的管理，也是一种组件间通信的方式，适用于任意组件间通信。

1.通终端输入npm命令安装vueX。

注意：如果是vue2项目安装vuex3，vue3项目安装vuex4。

npm i vuex@3.6.4 -S

2.在src目录下新建一个store文件夹并且在里面新建一个index.js文件。

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

// 创建数据仓库
const store = new Vuex.Store({
  //state，在此处定义的数据，可以被其他组件所共享
  state:{
    msg:'我是vuex所提供的内容',
  }
})

export default store

3.在main.js中导入。

import store from './store'
new Vue({
  render: h => h(App),
  // 挂载vueX（属性名与导入名称相同可简写成一个名字）
  store,
}).$mount('#app')

4.在你需要显示的地方调用$store.state.属性名显示属性值。

<h1 v-text="$store.state.msg"></h1>