在 Nuxtjs 中扩展全局 mixin

Question

I'm on Nuxtjs 2.15.7 and I have a mixin file like this:

utils.js :

import Vue from "vue"

if (!Vue.__utils__) {
  Vue.__utils__ = true
  Vue.mixin({ 
    data(){
      return{
         ...
      }
    },
    methods:{
      ...
    }
  })
}

I want to create another global mixin that extend my utils.js, for example:

utils-another.js :

import utils from '@/plugins/mixins/utils.js'
import Vue from "vue"

if (!Vue.__utils__) {
  Vue.__utils__ = true
  Vue.mixin({ 
    // ... utils.js codes
    data(){
      return{
         ...
      }
    },
    methods:{
      ...
    }
  })
}

based on some env property i decide to use utils.js or utils-another.js . so how can I do that? I don't want to copy all utils.js codes to utils-another.js , that makes it hard for maintenance.

Answer 1

You can separate the mixin code this way

// example utilsMixin1.js
export default {
  data() {
    return {
      //...
    }
  },
  methods: {
    //...
  }
}

// example utilsMixin2.js
export default {
  data() {
    return {
      //...
    }
  },
}

Thus, you can make two mixins global.

// utils-another.js:
import utilsMixin1 from '@/plugins/mixins/utilsMixin1.js'
import utilsMixin2 from '@/plugins/mixins/utilsMixin2.js'
import Vue from "vue"

if (!Vue.__utils__) {
  Vue.__utils__ = true
  Vue.mixin({
    mixins: [utilsMixin1, utilsMixin2], // utils.js codes
  })
}

or using only one mixin

// utils-another.js:
import utilsMixin1 from '@/plugins/mixins/utilsMixin1.js'
import Vue from "vue"

if (!Vue.__utils__) {
  Vue.__utils__ = true
  Vue.mixin({
    mixins: [utilsMixin1], // utils.js codes
  })
}

Use global mixins sparsely and carefully, because it affects every single Vue instance created, including third party components.