正文
用provide/inject来实现简单的vuex状态管理功能
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
在开发的时候，经常会涉及到组件之间的通信。简单的有父子组件的通信，兄弟组件的通信通常可以借助Bus来进行。当然也可以用vuex来进行状态管理，但是，有时候用vuex未免有把简单的问题复杂化。
如果要进行状态管理的话，比如要存取用户信息，这时候可以利用 Vue.js 2.2.0 版本后新增的 API provide/inject来写，详细看文档
https://cn.vuejs.org/v2/api/#provide-inject
用法就是在一个组件中provide一个属性，另一个组件inject，就可以在这个组件中访问前面组件的属性
// A.vue
export default {
provide: {
title: 'Hello World'
}
} // B.vue
export default {
inject: ['title'],
mounted () {
console.log(this.name); //Hello World
}
}
需要注意的是：
provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。
就是说如果A.vue的title属性变化了，B组件里的title是不变的，还是Hello World
用这个来替代vuex,存取用户信息
app.vue 是整个项目第一个被渲染的组件，而且只会渲染一次（即使切换路由，app.vue 也不会被再次渲染），利用这个特性，很适合做一次性全局的状态数据管理，例如，我们将用户的登录信息保存起来：
provide / inject API 主要解决了跨级组件间的通信问题，不过它的使用场景，主要是子组件获取上级组件的状态，跨级组件间建立了一种主动提供与依赖注入的关系。
app.vue 提供userInfo信息
export default {
provide () {
return {
app: this
}
},
data () {
return {
userInfo: null
}
},
methods: {
getUserInfo () {
// 这里通过 ajax 获取用户信息后赋值
$.ajax('/userinfo', (data) => {
this.userInfo = data;
});
}
},
mounted () {
this.getUserInfo();
}
}
这样，任何页面都可以访问userInfo
<template>
<div>
{{ app.userInfo }}
</div>
</template>
<script>
export default {
inject: ['app'],
created(){
console.log(this.app.userInfo);
}
}
</script>
除了直接使用数据，还可以调用方法。比如在某个页面里，修改了个人资料，这时一开始在
app.vue
里获取的
userInfo
已经不是最新的了，需要重新获取。
export default {
inject: ['app'],
methods: {
changeUserInfo () {
// 这里修改完用户数据后，通知 app.vue 更新，以下为伪代码
$.ajax('/updateuserinfo', () => {
// 直接通过 this.app 就可以调用 app.vue 里的方法
this.app.getUserInfo();
})
}
}
}
参考：https://juejin.im/book/5bc844166fb9a05cd676ebca/section/5bc845435188255c533655f4
