vue3.x+vuex 后台系统设置按钮权限

vuex，设置store

import { createStore } from 'vuex'

export default createStore({
  state: {
    buttonPermission: {
      add: true,
      edit: false,
      delete: true
    }
  },
  mutations: { },
  actions: { },
  modules: { }
})

编写指令：

import store from '../store/index'
export default {
    mounted(el, bindings, vnode) {
        let permissionValue = bindings.value;
        let boolean = store.state.buttonPermission[permissionValue];
        !boolean && el.parentNode.removeChild(el);
     }
}

使用

<template>
  <button v-has="'edit'">edit</button>
  <button v-has="'add'">add</button>
  <button v-has="'delete'">delete</button>
</template>

<script>
import has from './directives/has'
console.log(has);
export default {
  name: "Index",
  components: {},
  directives:{ has }
};
</script>