VueJS architecture model classes and API services

Hello,

Hmmm ... I'm working with VueJS for some years now and I never saw any tutorial using classes for the different models.

For now, I use services.

/js/services
/js/services/categoryService.js
/js/services/bookService.js

In each service file, I define all API calls (getAll, get, post, put, delete).

When I have a form, I define a reactive property.

const book = reactive({});

But ... it's perhaps not so clean.

Why not using classes to define each model ?

class Category
{
	// properties
	// methods => API calls
}

Then in a form I could just store a new model by calling the right method from the class.

What do you think about this ?

Thanks for sharing your experience about this ;).

Mega_Aleksandar

1 year ago

Level 18

Hi Vincent,

All I could remember watching was these in terms of sort of classes in the way you want.

Not sure if it is the step forward you were looking for.

For me using Laravel/Inertia/Vue combo makes those prop calls with the only flag too easy to think about storing any classes on the client side. Besides, having the classes defined on the client side in a js file might be a security issue as well.

Just my thoughts on this.

Best regards,

Mega Aleksandar

1 like

sidneygijzen

1 year ago

Level 18

I keep going back to this 'Unlock your frontend skills' article by Loris Leiva. There is so much good info in there! Currently I'm working on slowly refactoring a code base to the use of js models (classes), see this chapter of aforementioned article. So far, it feels cleaner and more readable.

1 like

martinbean

1 year ago

Best Answer

Level 80

@vincent15000 There’s no right or wrong answer here; you’re free to write your code and organise it how you wish. If you want to use services, you can do that. If you want to create classes that emulate Eloquent models, you’re free to do that as well.

1 like

Please or to participate in this conversation.