从vue指令中访问getter

Question

我正在编写一个简单的vue指令，如果权限与Vuex存储中的用户权限匹配，则返回true。但是我无法正确访问状态。

在Vue组件中，我可以访问getter <PropertyGroup Condition="............"> .....other props... <!-- Just add the following line here --> <Prefer32Bit>false</Prefer32Bit> </PropertyGroup> 和getter store.state.user.user.permissions，而不会出现任何问题。

store.getters.currentUserPermissions

控制台返回import store from './store/index'; Vue.directive('can',{ inserted(el,binding){ let permissions = store.getters.currentUserPermissions; console.log(permissions); if(!permissions.includes(binding.value)){ el.style.display = 'none'; } } });

但是当我在控制台中登录undefined时，我得到了：

store.getters

如何访问currentUserPermissions？

Answer 1

我遇到了同样的麻烦，设法找到了解决方案。我将其留在这里以帮助其他可能会寻找它的人。

指令参数vnode的第三个参数可以通过其$context属性访问存储。 所以代码看起来像这样：

Vue.directive('can',{
  inserted(el,binding,vnode){
    const store = vnode.context.$store;
    let permissions = store.getters.currentUserPermissions;

    console.log(permissions);
    if(!permissions.includes(binding.value)){
      el.style.display = 'none';
    }
  }
});

请注意，如果所需的吸气剂位于模块内部，则必须以其他方式访问它：

store.getters['<module>/<getter>']