CODEWITHSUNDEEP
vue.jsvuejs2vue-mixin
Hello World
Hello World

Reputation: 1129

What is the best naming convention in mixin functions?

I have had difficulty in the past figuring out where methods, computed values and so on are defined on components using multiple mixins. Is there a standard practise way around this?

I could do this:

// someMixin.js

export default {
  methods: {
    someMixin__someMethod () {
      /* do something */
    }
  }
}

// someComponent.js

import someMixin from'someMixin'

export default {
  name: 'someComponent',
  mixins: [ someMixin ],
  methods: {
    someMethod () {
      this.someMixin__someMethod()
    }
  }
}

but it isn't very conventional and could be confusing for other devs

Upvotes: 2

Views: 7184

Answers (4)

Gregor Voinov
Gregor Voinov

Reputation: 2263

The recommended naming convention from vuejs

$_myMixinName

Vue uses the _ prefix to define its own private properties, so using the same prefix (e.g. _update) risks overwriting an instance property. Even if you check and Vue is not currently using a particular property name, there is no guarantee a conflict won’t arise in a later version.

As for the $ prefix, its purpose within the Vue ecosystem is special instance properties that are exposed to the user, so using it for private properties would not be appropriate.

Instead, we recommend combining the two prefixes into $_, as a convention for user-defined private properties that guarantee no conflicts with Vue.

https://v2.vuejs.org/v2/style-guide/#Private-property-names-essential

Upvotes: 4

Joeri
Joeri

Reputation: 2308

O okay...

I'm doing this:

clipframe.js:

const clipFrame = {

    methods:
    {
        clip(frame){

            return ''

        }

    }

}

export default clipFrame

main.vue:

import clipFrame from '../mixins/clipframe.js'

export default {
    name: 'ManageActions',

    mounted() {
    },

    computed: {
    },

    mixins: [
        clipFrame
    ],

    methods:
    {
        // clip(frame){ in mixin },
    }
}

It's not a class and not a define... so I don't really know if it should be pascalCase, fullcaps or snake, or whatever...

But I'm not binding it to a local method. The method is mixed as it is and can be used by the name as defined in the mixin.

When I do bind methods to local methods I use a normal Class. Something like
import Bla from '../classes/Bla.js'
method: doit(x) { return Bla.method(x) }
Not sure I got my singleton right here, but you get the idea.

Upvotes: 0

clayperez
clayperez

Reputation: 845

I prefer to be extremely clear about the source of functionality when I'm building my Vue apps, so I go the extra mile and prefix my mixin functions with "mixin_". Here's a snippet...

/**
 * INTERVALOMETER!
 *
 * In some components and pages that get mounted we should check to make sure we are clearing
 * any existing intervals created by setInterval() so we don't get repetitive tasks running
 * away from us. Since this is common, I created this mixin to reuse in different places
 * throughout the system.
 */
export default {
methods: {
    mixin_startIntervalometer(intervalDataKey, fn, ms) {
        clearInterval(this[intervalDataKey])
        this[intervalDataKey] = setInterval(fn, ms)
    }
}
}

Upvotes: 0

Michael
Michael

Reputation: 5038

AFAIK there isn't a convention this is why there are other solutions for mixins. When using mixins the drawback is the encapsulated logic or data is hidden and you can have name collisions as well as difficulty understanding where behavior comes from.
Maybe worth a try is the new vue functional api which accomplishes the same thing minus those issues, you can use that as a plugin until vue-3 comes out.
If you are locked into mixins then just develop your own convention as well as what can be put into the mixin as not to have conflicts between the component and mixin.

Upvotes: 0

Related Questions