Is it considered poor practice for two components to both utilize the same module within the Vuex store?

Question

Is it considered poor practice for two components to both utilize the same module within the Vuex store?

Imagine you've created a brand new Vue component called BComponent, along with a fresh store module named BModule. Now, you find yourself in the situation where you need to utilize some state logic that's already been implemented in AModule for use in AComponent (specifically, a request made to an API endpoint).

Would it be considered poor practice to reuse this existing logic? What potential issues could arise from doing so? And most importantly, could this impact AComponent in any way?

Many thanks in advance!

vue.js vuex store vuex-modules

Answer 1

Answer №1

Context is key in determining whether a certain practice is good or bad.

In general, it is not considered a bad practice to have a "Cart module", a "Listing component", and a "Cart component" all interacting with each other.

It is important for your store and components to be independent from each other so they can be easily reused:

Your store should not be dependent on any specific component that uses it; it serves as the client-side "database".
Your components should not be concerned with which other components are using the same store.

This question is akin to structuring a database or modeling classes, such as deciding whether to:

Separate "Teacher" and "Student" entities with similar properties and methods.
Create a parent "Person" entity that "Teacher" and "Student" can inherit from (inheritance).
Compose objects together (composition).

Sometimes, "Teacher" and "Student" may initially share some attributes but eventually diverge.

In most cases, Composition is favored over Inheritance because it allows for flexibility without being tied down to a parent entity.

You could implement this concept by:

const Teacher = addTeachingSkills(createPerson())
const Student = addLearningSkills(createPerson())

Answer 2

Context is key in determining whether a certain practice is good or bad.

In general, it is not considered a bad practice to have a "Cart module", a "Listing component", and a "Cart component" all interacting with each other.

It is important for your store and components to be independent from each other so they can be easily reused:

Your store should not be dependent on any specific component that uses it; it serves as the client-side "database".
Your components should not be concerned with which other components are using the same store.

This question is akin to structuring a database or modeling classes, such as deciding whether to:

Separate "Teacher" and "Student" entities with similar properties and methods.
Create a parent "Person" entity that "Teacher" and "Student" can inherit from (inheritance).
Compose objects together (composition).

Sometimes, "Teacher" and "Student" may initially share some attributes but eventually diverge.

In most cases, Composition is favored over Inheritance because it allows for flexibility without being tied down to a parent entity.

You could implement this concept by:

const Teacher = addTeachingSkills(createPerson())
const Student = addLearningSkills(createPerson())

Is it considered poor practice for two components to both utilize the same module within the Vuex store?

Answer №1

Similar questions

Leveraging Apostrophe CMS for building a decoupled single page application

The convention for naming the StoreModule.forRoot in ngrx

How can you effectively blend Vue/Angular with other JavaScript resources to enhance your development process?