步骤概览

第一步：npm i vuex -S 或者 yarn add vuex -S （通常只是在开发阶段使用）

第二步： 创建store/index.js import vuex from 'vuex' import vue from 'vue'

第三步：Vue.use(vuex)

第四步：const store = new Vuex.Store({...配置项})

第五步：导出 export default store

第六步：导入main.js 在根实例配置 store 选项指向 store 实例对象

1.下载 vuex

终端命令yarn add vuex -S 或者 npm i vuex -S

2.src目录下创建文件：store/index.js

// 1.初始化一个vuex的实例（数据仓库） 导出即可
import Vuex from 'vuex'
import Vue from 'vue'

// 2.注册 Vue.use(Vuex)
// Vue.use(Vuex)->给组件添加一个$store对象
Vue.use(Vuex)

// 3.实例化store对象
const store = new Vuex.Store({
  // 配置（state|mutations|actions|getters|modules）
})
// 4.导出store对象
export default store

3.main.js注入 store 实例

import Vue from 'vue'
import App from './App.vue'
import store from '@/store' // 导入store对象
Vue.config.productionTip = false
new Vue({
//6.把store对象挂载到vue实例对象中(确保组件this.$store使用),
//给组件的$store赋值,换句话说,今后组件内部使用的$store对象,就是store/index.js导出的store实例
store,
render: h => h(App),
}).$mount('#app')