前言：vue2中想要实现一个页面跳转到另一个页面同时把数据传送过去的效果。由于本人才疏学浅，只记得eventBus可以用来为非父子组件传值，于是没有多想，直接上手eventBus，但是值一直传不过去或者无法把值渲染到页面上去。只好另找出路。
经过各方查找，大概清楚了为什么eventBus无法传值了。请看下面这张图
原因：事件如果还没有注册监听，发送的数据就接收不到；必须要在数据发送过来之前就注册事件监听。我的问题就在此处。
于是我换了个方向，找到了vuex。
vuex它相当于一个公共仓库，保存着所有组件都能共用的数据。很符合我的需求。
🍔简单实现一下vuex
1、安装
由于我用的是vue2，而vuex最新版本不能用到vue2中，所以直接安装会报错。
可以用以下方法查看哪个版本合适
npm view vuex versions --json
终端会显示一堆合适的版本，选一个即可。
npm install vuex@3.6.0
2、在store文件夹，新建个index.js文件（命名看个人习惯，如果没有该文件夹，可以新建一个，当然也可以不建文件夹，直接新建个js文件也是可以的）
在新建的js文件中写入如下代码:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
pathName: '',
currDbSource: {},
currJobData: {},
DbSource: []
},
mutations: {
// 保存当前菜单栏的路径
savePath (state, pathName) {
state.pathName = pathName
},
// 保存当前点击的数据源
saveCurrDbSource (state, currDbSource) {
state.currDbSource = currDbSource
},
// 保存当前点击的元数据
saveCurrJobData (state, currJobData) {
state.currJobData = currJobData
},
// 保存所有数据源
saveDbSource (state, DbSource) {
state.DbSource = DbSource
}
}
})
各个代码段的作用：state是自定义的一些变量，需要用来保存数据，mutations是用来触发事件，相当于方法，用户需要通过触发这个方法，借此来保存数据，参数的话，第二个参数就是用户传入的值，然后在方法中赋值给state中的变量
3、main.js引用（注意路径即可）
import store from '@/store/index.js'
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
4、保存数据：（场景举例：当我点击按钮后，我需要把当前的数据保存到vuex中，然后跳转到别的路由，然后使用这些数据）
methods: {
click () {
// 点击按钮进行一些操作，然后保存数据
this.$store.commit('saveCurrDbSource', this.db)
}
}
5、获取变量：（当数据初始获取不到时，可以使用计算属性用来获取）
this.$store.state.变量名
// 例如
this.$store.state.currDbSource
这样其他组件就可以共用这个保存起来的数据了。
参考他人博客：
