Vue知识点：Vuex

1. Vuex概念：专门在Vue中实现集中式状态(数据)管理的一个Vue插件，对Vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间的通信方式，且适用于任意组件间通信
2. 使用场景:
（1）多个组件依赖于同一个状态
（2）来自不同组件的行为需要变更同一状态
3. Vuex工作原理：

4. 搭建Vuex环境：
（1）下载安装Vuex：npm i vuex
注意：在下载时如若直接npm i vuex，则默认下载的是vue3版本对应的vuex4，所以如若使用的是vue2则应该使用npm i vuex@3
（2）创建src/store/index.js该文件用于创建Vuex中最为核心的store

//引入Vue
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'

//应用Vuex插件
Vue.use(Vuex)

const actions = {}   //准备一个actions用于响应组件中的动作
const mutations = {} //准备一个mutations用于操作数据（state）
const state = {}  //准备一个state用于存储数据

//创建并导出store
export default new Vuex.Store({
   actions,
   mutations,
   state,
})

（3）在src/main.js中创建vm时传入store配置项

import Vue from 'vue'
import App from './App.vue'
//引入store
import store from './store'

Vue.config.productionTip = false

new Vue({
   el: '#app',
   render: h => h(App),
   //添加配置项store
   store,
   beforeCreate(){
      Vue.prototype.$bus = this
   }
})

此处说明一个问题：
按理此时只需要在main.js里同时引入Vuex和store，使用Vuex，并配置store即可，为什么要在此文件（src/store/index.js）中如此繁杂的引入使用呢？
分析：
在main.js直接引入Vuex和store时，会报错，报的错误意思是：’在创建store实例之前必须调用Vue.use(Vuex)‘，而在运行时，会先解析所有的import,然后再去编译Vue.use(Vuex)，故而在main.js处如果直接引入Vuex和store时，会在创建store实例之后再调用到Vue.use(Vuex)，则会报错
解决方法：
就是将Vue.use(Vuex)在 new Store实例对象之前调用即可，因此需要在src/store/index.js中引入Vue和Vuex