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>