Как наследовать распространенные методы в Vue.js? - PullRequest
Новая
       13

Как наследовать распространенные методы в Vue.js?

0 голосов
/ 28 июня 2019

У меня есть много компонентов, которым может потребоваться узнать, является ли пользователь администратором или имеет определенные разрешения.

Есть ли какое-либо наследование в Vue.js, которое позволяет мне указывать вычисляемый метод для самого верхнего родителя, даже App.vue, у которого есть вычисляемый метод, тогда я могу просто вызвать hasPermission("...") от любого потомка, и это сработает.

Родитель: 

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

Ребенок: 

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

Я знаю, что могу использовать Vuex, но это означает, что я должен импортировать store в каждый компонент, а также создать метод получения или аналогичный в качестве вычисляемого свойства каждого компонента. Мне просто интересно, есть ли лучший способ.

Ответы [ 2 ]

0 голосов
/ 28 июня 2019

Я бы порекомендовал использовать vuex, однако это возможно при использовании предоставить / ввести .

Например, в вашем основном приложении: 

provide: {
    user: {
        admin: true
    }
}

А потом в дочерних компонентах: 

inject: ['user'],

created () {
    console.log(this.user);
}
0 голосов
/ 28 июня 2019

Вы можете использовать mapGetters помощник , чтобы упростить импорт геттеров из вашего магазина в качестве вычисляемых свойств.

Например, в вашем компоненте: 

import { mapGetters } from 'vuex'

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