Level 67
@gadreel Why not just use a getter in VueX? You need the data in different components, you can use getters like computed properties to modify the state right there.
1 like
Jul 11, 2022
4
Level 4
Computed or Watcher
Hello.
I am trying to decide what is the best approach to the following:
I get these DATA from Laravel Resources and from there to VUEX and a parent component retrieves these data from a getter.
{
"data": {
"id": 1,
"title": "Sample Seminar",
"periods": [
{
"id": 1,
"max_total_seats": 34,
"price": "200.00",
"status": 1,
"seminar_type_id": 2,
"starting": "2022-12-15 09:00",
"ending": "2022-12-16 12:15",
"lang": "en",
"job_titles": [
{
"id": 1,
"name": "Sample Job 1"
},
{
"id": 2,
"name": "Sample Job 2"
},
{
"id": 3,
"name": "Sample Job 3"
},
{
"id": 4,
"name": "Sample Job 4"
}
]
}
]
}
}
The "issue" now is that I want to pass these data to a child component (a form) which requires the job_titles to be an array of IDs (it's a select box.). What is the best way to transform the data?
- Transform the data using a computed method/property before passing it to the child component?
- Use a warcher inside the child component to transform them?
- If computed and watcher are not supposed to do any of these please give me your solution.
Level 4
@fylzero thanks for your reply.
In general is it a common approach to have getters for different needs?
For example, this time I want the data in different format or I want some partial data so you create a different getter... Is this an approach that it's recommended?
If I take VUEX out of the equation and I only had axios to send and receive then computed was the way to go?
Level 3
@gadreel If you leave vuex out of the picture, a computed function is what you want.
Computed functions are cached, and are evaluated lazily meaning they are only executed when you use them. A watcher will run it's functions regardless with every change on the prop being watched.
Level 67
@gadreel Think of getters as computed for VueX. It is literally what they are. Just ways of labelling and accessing derived state. Very common to use these for different needs in VueX.
Please or to participate in this conversation.