記一次Vue.js混入（mixin）的使用—分權限管理頁面

需求背景：在一個後臺的管理系統中，不一樣的用戶角色對應不一樣的用戶權限。現要求，同一個頁面對有操做權限的用戶來講是可操做的，對無操做權限的用戶來講是隻讀的，即操做按鈕均失效。系統用Vue.js開發。

1、mixin的概念

官方文檔這麼說：混入是一種分發Vue組件中可服用功能的很是靈活的方式。混入對象能夠包含任意組件選項。當組件使用混入對象時，全部混入對象的選項將被混入該組件自己的選項。

我本身的理解：混入對象具備Vue組件能夠聲明的全部選項，如[components]、[computed]、[methods]等；當組件使用混入對象時，該組件也同時擁有了混入對象的選項。

2、思路

按照開篇寫的需求描述，若是用通常的方法，咱們一般會在每一個頁面的vue文件中，判斷當前用戶是否具備操做該頁面的權限，根據判斷結果來展現頁面。然而，這種方法會致使大量代碼的重複，徒然增長了一些無心義的工做量。所以，須要有一個能夠複用的方法。

故此，咱們能夠把上述的可複用的辦法放在混入對象的選項當中。

3、代碼展現

在混入對象的computed選項中，咱們有這幾個方法，來判斷用戶所擁有的的‘編輯’、‘查看’、‘刪除’等權限。

computed: {
    allowedToCreate() {
      return this.hasOperatePermissions('createRole');
    },
    allowedToEdit() {
      return this.hasOperatePermissions('editRole');
    },
    allowedToCheckIn() {
      return this.hasOperatePermissions('checkInRole');
    },
    allowedToDelete() {
      return this.hasOperatePermissions('deleteRole');
    },    
 },

注意，若是普通組件中引用了混入對象，那麼這些計算屬性會自動成爲組件的計算屬性。具體如何建立一個混入對象，而且引入該混入對象，這裏不細講，可參考官方文檔。