Como usar o Vue Mixins de uma maneira melhor

Os componentes do Mixin são frequentemente usados em projetos para reutilizar alguma lógica de negócios, mas possuem algumas nuances indeterminadas que estão se tornando cada vez mais aparentes no desenvolvimento do projeto. Ocasionalmente, encontrei situações em que elas dificultam a refatoração de código ou o desenvolvimento de novos recursos.

Antes de apresentar minha abordagem, gostaria de descrever as vantagens e desvantagens do uso de mixins.

vantagem

Estende o princípio DRY de reutilização de código. Podemos reutilizar a mesma lógica de negócios em diferentes componentes.
Podemos usar o mixin como um mixin global que compartilha o contexto com todos os componentes.

deficiência

A lógica dos componentes usando mixins é opaca.
Contexto substituível, temos que ter cuidado para não substituir alguns métodos, getters ou dados do Mixin por causa do mesmo nome;

As desvantagens não são uma razão fundamental para evitar mixins, mas devemos estar cientes delas. Recomenda-se o uso de métodos baseados nessas dicas para reduzir o impacto das deficiências.

Use prefixos no início dos nomes de método, getter, valor e props. Ele mostra a funcionalidade relacionada ao mixin. Usar este truque nos permite separar facilmente props de componentes e props de mixin. Por exemplo: $<mixinName>_<(prop|method|value)>

export default {
  props: {
    $impressionsMixin_page: {
      type: Number,
      required: true
    },
    $impressionsMixin_listingId: {
      type: Number,
      required: true
    },
    $impressionsMixin_itemId: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      $impressionsMixin_observer: null,
      $impressionsMixin_timeout: null,
      $impressionsMixin_eventObject: null
    };
  },
  methods: {
    $impressionsMixin_getObserverOptions() {
      // ...
    },
    $impressionsMixin_setImpressionObserver() {
      // ...
    },
    $impressionsMixin_resetImpressionObserver() {
      // ...
    },
    $impressionsMixin_logImpression() {
      // ...
    }
  }
};

Use-o assim no componente pai:

<template>
  <div id="app">
    <ListingItem
      v-for="item in items"
      :key="item.id"
      :item="item"
      textAlign="left"
      :$impressionsMixin_page="page"
      :$impressionsMixin_itemId="item.id"
      :$impressionsMixin_listingId="listingId"
    />
  </div>
</template>

Eu não gosto de usar prefixos em mixins globais. Normalmente, os nomes desses métodos e valores são inequívocos e sua funcionalidade não é repetida em outras partes do projeto, portanto, não há necessidade de prefixá-los.

export default {
  config() {
    // ...
  },
  user() {
    // ...
  },
  isMobile() {
    // ...
  },
  isTablet() {
    // ...
  },
  isDesktop() {
    // ...
  }
};

Vantagens deste método:

Os métodos ou propriedades de Mixins podem ser facilmente usados pelo preenchimento automático do IDE.
O uso do prefixo evita que os métodos do componente substituam acidentalmente métodos e propriedades do mixin.
Leitura transparente e fácil do código do componente para desenvolvedores em grandes projetos.

Resumir

O Mixin é uma ferramenta útil, mas pode tornar nossos projetos mais complexos, inflexíveis e opacos, principalmente em grandes projetos. Usar este método é uma boa prática para ser mais explícito sobre o que o mixin significa e evitar alguns bugs causados por ambiguidade.