Question

0

77

Views

making reusable logic from data function in vue components

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?

about 4 years ago · Juan Pablo Isaza

3 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-12T05:49:10.404Z

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 !

Answer 2 · 2022-07-12T05:49:10.410Z

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

Answer 3 · 2022-07-12T05:49:10.415Z

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.

0

77

making reusable logic from data function in vue components

3 answers

0

0

0

Find remote jobs

Andres GPT