用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

結語：vue用了挺久了的，但基本都用的是比較經常使用的一些props,watch,computed,mixins等，知道angular裏面有依賴注入，一直不知道vue也能夠，偶然看到這個方法，感受用起來要比vuex簡單，容易理解，用起來應該可以簡化不少代碼。mark~