vue.js - Vuex 返回 bool 值？

Question

我正在尝试制作一个可以在名为 hasPermission 的模板中使用字符串调用的函数。但是当我调用它时，vuex 返回一个 promise 对象。无论如何我可以让它返回一个 bool 值吗？

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设为method-style setter/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')"

请记住，这些 getter 不像普通的 getter 那样被缓存，但 Action 也不是。

这是一个demo