Vuejs how to use repeated methods in single components

Question

How would I use the same method across different components without rewriting the same method for reach component. I looked into mixins but the documentation says 'Use global mixins sparsely and carefully'. So I'm wondering if there is a more ideal way for this approach. Same with global computed.

<template>
    <div class="wrapper">
    ...
    <a href="#" @click.prevent="goToPage('page')">Link on many templates</a>
    ...
    </div>
</template>

<script>
export default {
   data() {
     return {}
   },
   methods: {
     goToPage(page) {
        return this.$store.commit('page/push', {page:page});
     }
   }
}
</script>

Thanks

mixins is what you should use if you are using vue 2. It has some drawbacks but doesn't mean it can't be used. Or you can wait for vue 3 to be officially released. — akuiper
– akuiper, Commented Apr 28, 2020 at 1:03
@Psidom Can you elaborate more on Vue 3 and the benefits it brings that might help in this situation? I can't find another official docs. Thanks! — Matt
– Matt, Commented Apr 28, 2020 at 2:02
You can read vue composition-api and more specifically logic extraction and reuse here. TLDR: mixin suffers from problems such as property resources clarity and namespace clashing. These problems will solved with vue 3's composition api. — akuiper
– akuiper, Commented Apr 28, 2020 at 2:22

tony19 · Accepted Answer · 2022-07-15 06:04:19Z

Global mixins are not the only type of mixin. See https://v2.vuejs.org/v2/guide/mixins.html

If you want to add a method or computed property to every component then you'd use a global mixin. This would affect all components, including those from third party libraries. You'd need to be careful when choosing a name to ensure you don't collide with anything else. There's also a small performance overhead from using a global mixin. As an example, Vuex uses a global mixin to ensure that the $store property is present on all components.

If you only need to add the method/property to a few components then you'd be much better off with a normal mixin. Typically that would have its own file and look something like this:

// my-mixin.js
export default {
  methods: {
    goToPage(page) {
      return this.$store.commit('page/push', {page:page});
    }
  }
}

and then within your .vue files:

<script>
import myMixin from 'my-mixin'

export default {
  mixins: [myMixin],
  // ... all the other options
}
</script>

Given the example in the question seems to be a navigational link, an alternative to using a mixin might be to introduce a suitable component to handle those links. Rather than sharing code between components you'd just use the link component. It would depend on whether the method has uses beyond those links.

There are alternatives, such as sharing things globally across components using Vue.prototype, but for the example given in the question that doesn't seem a good fit.

I would also note that Vue 3 introduces some new alternatives to mixins via the composition API. However, it isn't immediately obvious that using composition would actually be an improvement in your specific use case. Vue 3 is also still in beta.

Collectives™ on Stack Overflow

Vuejs how to use repeated methods in single components

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related