provide / inject替代 Vuex

provide / inject可以解决上述弊端

A.vue–>B.vue,用法：

// A.vue
export default {
provide: {
name: 'Aresn'
}
}

// B.vue
export default {
inject: ['name'],
mounted () {
console.log(this.name); // Aresn
}
}

provide / inject替代 Vuex
Vuex 做状态管理，它是一个专为 Vue.js 开发的状态管理模式，用于集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

使用 Vuex，最主要的目的是跨组件通信、全局数据维护、多人协同开发。需求比如有：用户的登录信息维护、通知信息维护等全局的状态和数据。

一般在 webpack 中使用 Vue.js，都会有一个入口文件 main.js，里面通常导入了 Vue、VueRouter、iView 等库，通常也会导入一个入口组件 app.vue 作为根组件。一个简单的 app.vue 可能只有以下代码：

使用 provide / inject 替代 Vuex，就是在这个 app.vue 文件上做文章。把app.vue 理解为一个最外层的根组件，用来存储所有需要的全局数据和状态，甚至是计算属性（computed）、方法（methods）等。因为你的项目中所有的组件（包含路由），它的父组件（或根组件）都是 app.vue，所以我们把整个 app.vue 实例通过 provide 对外提供。

把整个 app.vue 的实例 this 对外提供，命名为 app（这个名字可以自定义，推荐使用 app，使用这个名字后，子组件不能再使用它作为局部属性）。接下来，任何组件（或路由）只要通过 inject 注入 app.vue 的 app 的话，都可以直接通过 this.app.xxx 来访问 app.vue 的 data、computed、methods 等内容。

app.vue 是整个项目第一个被渲染的组件，而且只会渲染一次（即使切换路由，app.vue 也不会被再次渲染），利用这个特性，很适合做一次性全局的状态数据管理。

//app.vue

其它任何界面或组件通过inject注入app 后就可以访问 userInfo 的数据了：

在其他页面导致userInfo更新，需要重新获取时：

参考这里 https://blog.csdn.net/isxixi/article/details/126544516