VueJS writing mixins and lifecyle hooks

People familiar with PHP can relate to VueJS mixins with “Traits”.

Mixins : Overview

Mixins allow to create re-usable code blocks which you can use within your components.
To give you an example you might want to use a  Mixin if you have component which have similar functionalities.

To be more concrete here is a code example:

// manager.vue

<template>
// some template code
</template>

<script> 
export default {
 // some code 
 computed : {
  url() {
     return `${js_session.base_url}/${this.prefix}/${this.account_id}/`
  }
 // some code
}
}
</script>

// engineer.vue

<template>
// some template code
</template>

<script> 
export default {
 // some code 
 computed : {
  url() {
     return `${js_session.base_url}/${this.prefix}/${this.account_id}/`
  }
 // some code
}
}
</script>

So in this naive example both the components use a computed property – url. We can move this computed property in a Mixin and use the Mixin in both the components.

Example:

//mixin.js

export default {
    computed: {
       url : {
           return `${js_session.base_url}/${this.prefix}/${this.account_id}/`
       }
    }
}

And update our components to use the Mixin instead of duplicating the code.

Here is example of how the manager.vue(similar change for engineer.vue) file would look after using a Mixin

<template>
// some template code
</template>

<script> 
import mixin from 'mixin.js';

export default {
 // some code 
 mixins: [mixin]
 // some code
}

</script>

As we can see the Mixinallowed us to re-use the “url” computed property code in both the components.

Merge Strategies and little rule of thumb for hook methods

VueJS will merge the options and hooks methods using appropriate strategies.  Options(like data, computed, methods) will be merged in the same object so the keys will be over-written and component’s options will take precedence. So if in our example we want a third(salesperson.vue) component to have some code from the Mixin(mixin.js) but want the “url” property from computed option to be some different logic, it can be defined in salesperson.vue and the one coming from mixin.js will not be used

Life-cycle hooks

Life-cycle hooks like mounted etc are instead put in an array. All defined hook methods are then called one by one.
Rule of thumb: When writing code in a life-cycle method which is inside a Mixin, make sure that you understand if this code needs to be run for every component that uses the Mixinor not.
If the answer is no, then inside the life-cycle hook call a method instead of writing your logic there directly.

So if you have something like this:

//mixin.js

export default {
    mounted() {
      this.form.setupForm(url).then((resp) => {
          this.loader = false;
      })
    }
}

It will be called on every component which uses this Mixin along with any mounted hook defined in the component.

Instead you can write above code as :
//mixin.js

export default {
    mounted() {
      this.setupForm()
    }, 
    methods: {
      setupForm() {
          this.form.setupForm(url).then((resp) => {
             this.loader = false;
          })
      }
    }

}

This will allow your component to define its own setup functionality or just give a blank method(setupForm) body in component if it doesn’t need any setup(maybe then this mixin shouldn’t be in the component but it’s just an example).

This in my opinion allows for greater flexibility when using Mixins.