making reusable logic from data function in vue components

Question

In my application, there is a menu page component. In this component, there are multiple static data and variable initialized. Like below

data() {
  return {
    tableInfo: {
      headers: ...,
      contents: ...,
      pagination: ....
    },
    url: {
      searchUri: ...,
      detailsUri: ....
     // other component specific  uri
    },
    searhInfo: {
     label: ...,
     searchtext: ...,
    // other things
    }
  }
},

So, kind of structure is following in all other components as well and other component specific variables and data are there too.

I want to reuse this properties to all my other components as well.

I created one mixin for this and it is working correct. Is there any better approach instead of mixin?

Azan Korejo · Accepted Answer · 2021-10-01 07:30:28Z

2

You said you have tried mixins and it is working correctly and I myself personally think that they are a good choice since the Vue framework recommends it

Mixins are a flexible way to distribute reusable functionalities for Vue components. A mixin object can contain any component options. When a component uses a mixin, all options in the mixin will be “mixed” into the component’s own options. -Vue Framework Definition

What you are trying to do is the same meaning making a file to reuse the functionality in components.

The approach you are using is correct and accurate to use in your situation and it is recommended by vue itself so it is not a bad practice.

no need to change it !

answered Oct 1, 2021 at 7:30

Azan Korejo

2091 gold badge2 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dipu Kumar Sah · Accepted Answer · 2021-10-01 14:53:11Z

0

You mentioned you have multiple static fields but have not mentioned anything about the dynamic contents. If you are using dynamic content then I suggest using props instead of mixins ( or a combination of both which suits your requirement).

But as of now, mixins is perfect for the current requirement.

answered Oct 1, 2021 at 14:53

Dipu Kumar Sah

1

Comments

Kamran Khatti · Accepted Answer · 2022-02-14 17:32:40Z

0

Using Mixins is one of the ways to manage shareable logic in Vue. But they have many drawbacks and should be avoided in both Vue 2 and Vue 3.
Scoped slots are a great alternative to Mixins for Vue 2 and they still have their place in Vue 3.
The Vue 3 composition API is a powerful tool to create readable component shareable logic. It is the option I would recommend to use in most cases but is for now limited to Vue 3.

Read more in details about vue code reuse pattern

answered Feb 14, 2022 at 17:32

Kamran Khatti

4,2171 gold badge23 silver badges33 bronze badges

Collectives™ on Stack Overflow

making reusable logic from data function in vue components

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related