You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Let's say there are 3 levels of nesting in <SectionA /> and 4 levels of nesting in <SectionB />.
Now, I will need a way to collect all the values from each <section> and combine them so I can send them to the API on submit. I can do either of the following:
Create a Pinia store solely dedicated to holding the form values
All components inside each <section> component will emit the data back up to the <section> component
Each <section> component will emit the data to the <form> parent component
The <form> component will be the only one directly interacting with the Pinia store
OR
Create a Pinia store solely dedicated to holding the form values
All components inside each <section> component will directly call the appropriate mutator functions inside the Pinia store whenever a value changes. For example, for the "Birthday" field, it will call the setAge() mutator inside the Pinia store when the user enters a value in that field
The <section> component will do the same -- directly call the mutator functions inside the Pinia store
I'm leaning towards the second approach as it feels less cumbersome and the data flow would be easier to follow. If I need to emit new data, I don't have to pass through several ancestors.
I suppose an advantage of the first approach is that there is only one place where we're calling the mutator functions? Somehow making it easier to debug? But I'm feeling that this just adds an unnecessary layer of abstraction/difficulty 🤔
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
Let's say I have a form:
I decided to put each
<section>
into a separate component, so now it looks more like this:Let's say there are 3 levels of nesting in
<SectionA />
and 4 levels of nesting in<SectionB />
.Now, I will need a way to collect all the values from each
<section>
and combine them so I can send them to the API on submit. I can do either of the following:<section>
component will emit the data back up to the<section>
component<section>
component will emit the data to the<form>
parent component<form>
component will be the only one directly interacting with the Pinia storeOR
<section>
component will directly call the appropriate mutator functions inside the Pinia store whenever a value changes. For example, for the "Birthday" field, it will call thesetAge()
mutator inside the Pinia store when the user enters a value in that field<section>
component will do the same -- directly call the mutator functions inside the Pinia storeI'm leaning towards the second approach as it feels less cumbersome and the data flow would be easier to follow. If I need to emit new data, I don't have to pass through several ancestors.
I suppose an advantage of the first approach is that there is only one place where we're calling the mutator functions? Somehow making it easier to debug? But I'm feeling that this just adds an unnecessary layer of abstraction/difficulty 🤔
Beta Was this translation helpful? Give feedback.
All reactions