Question

我有很多组件可能需要知道用户是管理员还是具有一定权限。

Vue.js中是否有任何继承关系，允许我在最高父级上指定一个计算方法，即使是App.vue也具有该计算方法，那么我可以从任何子级调用hasPermission("...")会起作用的。

父母：

computed: {
      hasPermission(name) {
        return this.$store.getters.hasPermission(name);
      }
}

孩子：

<div v-if="hasPermission('add')"></div>

我知道我可以使用Vuex，但这意味着我必须在每个组件中导入store，并且还必须使每个组件的getter或类似属性成为计算属性。我只是想知道是否有更好的方法。

Answer 1

您可以使用mapGetters helper来更轻松地从商店中将吸气剂作为计算属性导入。

例如，在您的组件中：

import { mapGetters } from 'vuex'

export default {
  // ...
  computed: {
    // mix the getters into computed with object spread operator
    ...mapGetters([
      'hasPermission',
      // ...
    ])
  }
}

Answer 2

我建议使用vuex，但是可以使用provide / inject。

例如在您的主应用程序中：

provide: {
    user: {
        admin: true
    }
}

然后在子组件中：

inject: ['user'],

created () {
    console.log(this.user);
}

如何继承Vue.js中的常用方法？

2 个答案: