Vuejs как использовать повторяющиеся методы в отдельных компонентах

Question

Как бы я использовал один и тот же метод для разных компонентов, не переписывая один и тот же метод для расширенного компонента. Я изучил миксины, но в документации сказано: «Используйте глобальные миксины редко и осторожно». Поэтому мне интересно, есть ли более идеальный способ для этого подхода. То же самое с глобальным вычислением.

<template>
    <div class="wrapper">
    ...
    <a href="#" @click.prevent="goToPage('page')">Link on many templates</a>
    ...
    </div>
</template>

<script>
export default {
   data() {
     return {}
   },
   methods: {
     goToPage(page) {
        return this.$store.commit('page/push', {page:page});
     }
   }
}
</script>

Спасибо

Answer 1

Глобальные миксины - не единственный тип миксинов. См. https://vuejs.org/v2/guide/mixins.html

Если вы хотите добавить метод или вычисляемое свойство к каждому компоненту, вы бы использовали глобальный миксин. Это повлияет на все компоненты, в том числе из сторонних библиотек. Вы должны быть осторожны при выборе имени, чтобы не столкнуться ни с чем другим. Существует также небольшое снижение производительности от использования глобального миксина. Например, Vuex использует глобальный миксин, чтобы гарантировать, что свойство $store присутствует во всех компонентах.

Если вам нужно только добавить метод / свойство к нескольким компонентам, тогда вам будет намного лучше с нормальным миксином. Как правило, это будет иметь свой собственный файл и выглядеть примерно так:

// my-mixin.js
export default {
  methods: {
    goToPage(page) {
      return this.$store.commit('page/push', {page:page});
    }
  }
}

, а затем в ваших .vue файлах:

<script>
import myMixin from 'my-mixin'

export default {
  mixins: [myMixin],
  // ... all the other options
}
</script>

Учитывая, что пример в вопросе кажется навигационная ссылка, альтернативой использованию миксина может быть введение подходящего компонента для обработки этих ссылок. Вместо того, чтобы делиться кодом между компонентами, вы просто используете компонент ссылки. Это будет зависеть от того, будет ли метод использовать за пределами этих ссылок.

Существуют альтернативы, такие как глобальный обмен информацией между компонентами с использованием Vue.prototype, но для примера, приведенного в вопросе, не кажется хорошим fit.

Я бы также отметил, что Vue 3 вводит некоторые новые альтернативы миксинам через API композиции. Однако не сразу очевидно, что использование композиции действительно улучшит ваш конкретный c вариант использования. Vue 3 также находится в бета-версии.