How to use Vue Mixins in a better way

Mixin components are often used in projects to reuse some business logic, but they have some indeterminate nuances that are becoming more and more apparent in project development. I've occasionally encountered such situations where they make it difficult to refactor code or develop new features.

Before introducing my approach, I would like to describe the advantages and disadvantages of using mixins.

advantage

• Extends the DRY principle of code reuse. We can reuse the same business logic in different components.
• We can use the mixin as a global mixin that shares the context with all components.

shortcoming

• The logic of components using mixins is opaque.
• Overridable context, we have to be careful not to override some Mixin's methods, getters or data because of the same name;

Disadvantages are not a key reason to avoid mixins, but we should be aware of them. It is recommended to use methods based on these tips to reduce the impact of shortcomings.

Use prefixes at the beginning of method, getter, value and props names. It showcases mixin related functionality. Using this trick allows us to easily separate component props and mixin props. For example: $<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 it like this in the parent component:

<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>

I don't like using prefixes in global mixins. Usually, the names of these methods and values ​​are unambiguous, and their functionality is not repeated in other parts of the project, so there is no need to prefix them.

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

Advantages of this method:

• The methods or properties of Mixins can be easily used by IDE autocompletion.
• Using the prefix prevents the component's methods from accidentally overriding mixin methods and properties.
• Transparent and easy reading of component code for developers in large projects.

Summarize

Mixin is a useful tool, but it can make our projects more complex, inflexible and opaque, especially in large projects. Using this method is a good practice to be more explicit about what the mixin means and avoid some bugs caused by ambiguity.