5 months ago

Application of VueX Module Reuse

Posted 5 months ago by ignisrzeus

Good day Laracasts!

I am fairly new to VueX, so I'm not entirely sure if this should be used in this specific situation.

Say in a given scenario, I have a Project that I fetch using axios in "someurl.com/projects/1" where I want to show Project 1.

Traditionally, I could store it in a local state:

export default{
	project: null

// methods
axios.get("/api/project/1/").then(response => {
	this.project = response.data.data;

Great! This works perfectly. However, given a scenario that this component has A LOT of child components, I would need to pass project MULTIPLE times as a prop. Now this is a fairly simple example, but I hope I get my point across. Instinctively, I am inclined to use VueX to store the said project, but this would result in "someurl.com/projects/1" and "someurl.com/projects/2" share the same state of the project (Please do take note that the project is not the only property in the state. I need to manage the states of other things as well that are unique to EACH page).

Vuex has posted "Module Reuse" as part of their documentation, but it provides little explanation as to how to apply this in an actual project.

That said, I have 2 questions:

  1. Should I use VueX for this situation?
  2. Should I just bear with it and pass EVERYTHING as a prop instead of using VueX?

Thank you Laracasts!

Please sign in or create an account to participate in this conversation.