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

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帮助器更轻松地从您的商店导入 getter 作为计算属性。

例如，在您的组件中：

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);
}