Vue中的Provide/inject

今天做了项目中的登陆功能，按照我之前一贯的套路都是使用vuex这个状态管理插件来处理数据。然后，我就想了想，看下vue有什么其它的方法能够实现父子N多辈的通信。
找了下api让我发现了provide和inject这个东西，哇靠，相见恨晚啊。哈哈。

Provide/Inject是什么？

provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。
这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。如果你熟悉 React，这与 React 的上下文特性很相似。

这是它的官方解释，嗯，不管了，先搞了再说。
先来试一下这个api怎么用。
在src/componemts下创建两个文件夹，其中Test.vue是HelloWorld.vue的子组件。

按照api的说法，可以在父组件，通过provide选项注入数据。
HelloWorld.vue

在Test.vue,通过选项inject来对数据进行接受。

在这里可以看到，是可以实现父子之间的通信的，可能有人说，我用props一样可以实现父子之间的通信啊，但其实provide/inject，并不仅仅只是父子的，就算是孙子辈，N辈都可以。那么，这个时候，我们来个大胆的想法，app.vue是所有组件的父组件，按照以上逻辑，我在app.vue定义的东西是不是都可以实现往下传递呢？

接下来，以一下用户登陆的场景

这样，任何页面或组件，只要通过 inject 注入 app 后，就可以直接访问 userInfo 的数据了，比如：

是不是很简单呢。除了直接使用数据，还可以调用方法。比如在某个页面里，修改了个人资料，这时一开始在 app.vue 里获取的 userInfo 已经不是最新的了，需要重新获取。可以这样使用：
某个页面

如果你的项目足够复杂，或需要多人协同开发时，在 app.vue 里会写非常多的代码，多到结构复杂难以维护。这时可以使用 Vue.js 的混合 mixins，将不同的逻辑分开到不同的 js 文件里。比如上面的用户信息，就可以放到混合里：

user.js

export default {
  data () {
    return {
      userInfo: null
    }
  },
  methods: {
    getUserInfo () {
      // 这里通过 ajax 获取用户信息后，赋值给 this.userInfo，以下为伪代码
      $.ajax('/user/info', (data) => {
        this.userInfo = data;
      });
    }
  },
  mounted () {
    this.getUserInfo();
  }
}

然后再app.vue中混合

<script>
  import mixins_user from '../mixins/user.js';

  export default {
    mixins: [mixins_user],
    data () {
      return {

      }
    }
  }
</script>