Vuex вернуть логическое значение?

Question

Я пытаюсь создать функцию, которую я могу вызывать в моих шаблонах, с именем hasPermission со строкой. Однако когда я его вызываю, vuex возвращает объект обещания. Могу ли я в любом случае заставить его вернуть логическое значение?

hasPermission({ state }, permission) {
  for (var i = 0; i < state.user.permissions.length; i++) {
    var perm = state.user.permissions[i];
    if (perm.name == permission) {
      return true;
    }
  }
  return false;
}

Я хочу просто иметь возможность вызывать его как v-if = "hasPermission (" test ") и затем показывать на основе ответа. Однако мне тяжело делать это. Буду рад любому совету, который вы можете дать :)

Answer 1

Вы можете сделать hasPermission a в стиле метода getter:

getters: {
  hasPermission: (state) => (permission) => {
    for (var i = 0; i < state.user.permissions.length; i++) {
      var perm = state.user.permissions[i];
      if (perm.name == permission) {
        return true;
      }
    }
    return false;
  }
}

Используйте mapGetters, чтобы включить его в компонент:

import { mapGetters } from 'vuex';

computed: {
  ...mapGetters(['hasPermission'])
}

Используйте его в шаблоне, например:

v-if="hasPermission('test')"

Просто имейте в виду, что эти геттеры не кэшируются как обычные геттеры, но тогда и действия не являются.

Вот демо