這篇文章主要介紹vue + vuex + directives如何實(shí)現(xiàn)權(quán)限按鈕，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)公司專注于兩當(dāng)網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠為您提供兩當(dāng)營銷型網(wǎng)站建設(shè)，兩當(dāng)網(wǎng)站制作、兩當(dāng)網(wǎng)頁設(shè)計、兩當(dāng)網(wǎng)站官網(wǎng)定制、成都微信小程序服務(wù)，打造兩當(dāng)網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供兩當(dāng)網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

遇到了一個業(yè)務(wù)場景：

某個按鈕按下去之前需要先判斷它是否登陸，如果沒有登陸需要跳轉(zhuǎn)到對應(yīng)的登陸頁面，否則就繼續(xù)該按鈕之后的操作。

對于這種問題，很顯然不能每個按鈕都去判斷，所以我思考了一下結(jié)合自定義指令和vuex完成了相應(yīng)的實(shí)現(xiàn)。

主要的代碼實(shí)現(xiàn)

const directive = Vue.directive('permission-click', {
 bind: (el, binding, vnode) => {
  el.addEventListener('click', (e) => {
   if (!store.getters.isLogin) {
    store.dispatch('showLogin')
   } else {
    typeof binding.value === 'function' && binding.value()
   }
  })
 }
})

這里封裝了一個自定義指令，添加了一個點(diǎn)擊事件，對于已經(jīng)登陸的則調(diào)用傳進(jìn)來的函數(shù)，否則通過vuex去控制登陸（此處的登陸是通過彈窗實(shí)現(xiàn)的）

自定義組件使用的時候也極為簡單

 ...