Я пытаюсь создать функцию, которую я могу вызывать в своих шаблонах, под названием 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 "), а затем показывать на основе ответа. Однако мне трудно это сделать. Я хотел бы получить любой совет, который вы можете дайте :)

2
Kyle B 16 Апр 2020 в 06:30

1 ответ

Лучший ответ

Вы можете создать hasPermission стиль метода геттер:

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')"

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

Вот демонстрация

2
Dan 16 Апр 2020 в 09:58