从vue指令中访问getter

Question

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

我能够从Vue组件中毫无问题地访问getter store.state.user.user.permissions和getter 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: (...)
> get currentUserPermissions: f ()
> __proto__: Object

如何访问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';
    }
  }
});

请注意，如果所需的getter位于模块内，则必须以不同的方式访问它：

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