通用的地方我们一般会称之为仓库

1.安装 vuex

安装vuex与vue-router类似，vuex是一个独立存在的插件，如果脚手架初始化没有选 vuex，就需要额外安装。

yarn add vuex@3 或者 npm i vuex@3

2.新建 store/index.js 专门存放 vuex

​ 为了维护项目目录的整洁，在src目录下新建一个store目录其下放置一个index.js文件。 (和 router/index.js 类似)

3.创建仓库 store/index.js

// 导入 vue
import Vue from 'vue'
// 导入 vuex
import Vuex from 'vuex'
// vuex也是vue的插件, 需要use一下, 进行插件的安装初始化
Vue.use(Vuex)

// 创建仓库 store
// 由于创建的不是Vuex，而是仓库，Vuex里面有一个创建仓库的语法：挂载Vuex这个对象身上的一个钩子方法：Store来初始化仓库
const store = new Vuex.Store()

// 导出仓库
export default store

4.在 main.js 中导入挂载到 Vue 实例上

import Vue from 'vue'
import App from './App.vue'
import store from './store/index'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  store
}).$mount('#app')

此刻起, 就成功创建了一个 空仓库!!

5.测试打印Vuex

App.vue

created(){
  // 配置成功返回一个对象，没配成功返回undefined
  // 检验路由有没有配置成功
  console.log(this.$router)
  // 检验仓库有没有配置成功
  console.log(this.$store)
}