Is it worth implementing smart components?

Question

Vue.js

Is it worth implementing smart components?
Or how not to run into pain.

After studying some VUE recommendations and what I found on the Internet.

There is such a thing as smart and stupid components.

Silly components do not depend on the logic of the main application.
Smart components are actually pages that are rigidly tied to the project and depend on a lot of things.

My question is how to organize the implementation of smart components (not pages) and is it worth it?
For example, in my application, the same logic of one component is often found.
This is Autocomplete, which should load the list depending on the entered data.
Agree, it would be illogical to implement the same mechanism in ten places.

At first, I did just that, implementing the whole thing directly in the components folder, and then I realized that I made a mistake and I should not have implemented the data loading logic there.
It has to be done in some other way.

I understand that the question is trivial, I would like to hear advice about the organization (smart, stupid).

Answer 1

You just ran into a common code reuse problem.
Of course, you want to write code once and avoid copy-paste, but this is not always easy to achieve.
Only competent planning of the program structure can overcome this problem. It is far from always possible to achieve the desired result the first time, you have to do refactoring.
Here are a few principles:
- try to break the program into components.
- The smaller and simpler the components, the easier it is to reuse them and the easier it is to work with them.
- use mixins when you need to reuse logic and you can't put it in a separate component.
- different calculations can generally be put into separate files in the assets folder