在使用directive和pinia做按钮权限控制的时候,pinia数据更新如何更好触发directive的updated函数

[l24520]

现在在使用 v-auth:[AUTH] 和 :class="AUTH_CLASS"时可以触发Directive的updated函数;
请问如何不在页面上添加额外引用(不导入usePermissionStore)的情况下使Directive正常触发updated
代码如下
directive.ts

export const vAuth: Directive<HTMLElement, string> = {
  mounted: (el, binding) => {
    window.console.log("mounted", el, binding);
    const value = binding.value;
    if (!value) {
      return;
    }
    if (!hasPermission(value)) {
      removeEl(el);
    } else {
      addEl(el);
    }
  },
  updated: (el, binding) => {
    window.console.log("updated", el, binding);
    const value = binding.value;
    if (!value) {
      return;
    }

    if (!hasPermission(value)) {
      removeEl(el);
    } else {
      addEl(el);
    }
  },
};
const hasPermission = (value: string) => {
  const permissionStore = usePermissionStore();
  return permissionStore.widget.includes(value);
};

const removeEl = (el: any) => {
  // 在绑定元素上存储父级元素
  el._parentNode = el.parentNode;
  // 在绑定元素上存储一个注释节点
  el._placeholderNode = document.createComment("auth");
  // 使用注释节点来占位
  el.parentNode?.replaceChild(el._placeholderNode, el);
};

const addEl = (el: any) => {
  // 替换掉给自己占位的注释节点
  el._parentNode?.replaceChild(el, el._placeholderNode);
};

permission.ts

import { defineStore } from "pinia";

export const usePermissionStore = defineStore("permissionStore", {
  state: () => ({
    widget: ["taga"],
  }),
  getters: {
    AUTH: (state) => state.widget.length,
    AUTH_CLASS: (state) => `auth_class_${state.widget.length}`,
  },
  actions: {
    //
    doit() {
      if (this.widget.length == 2) {
        this.widget.splice(1, 2);
      } else {
        this.widget.push("tagb");
      }
    },
  },
});

App.vue

<template>
  <div v-auth="'taga'" class="taga">taga</div>
  <div v-auth="'tagb'" class="tagb">tagb</div>

  <!-- <div v-auth:[AUTH]="'taga'">AUTH taga</div>
  <div v-auth:[AUTH]="'tagb'">AUTH tagb</div> -->

  <!-- <div v-auth="'taga'" :class="AUTH_CLASS">AUTH taga</div>
  <div v-auth="'tagb'" :class="AUTH_CLASS">AUTH tagb</div> -->
  <button @click="handleChange">change</button>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";
import { usePermissionStore } from "./store/permission";
import pinia from "./store/index";
import { storeToRefs } from "pinia";

const permission = usePermissionStore(pinia);
const { AUTH, AUTH_CLASS } = storeToRefs(permission);
@Options({
  methods: {
    handleChange() {
      permission.doit();
    },
  },
})
export default class App extends Vue {
  data() {
    return {
      AUTH,
      AUTH_CLASS,
    };
  }
}
</script>