Two vue components calling same API function

Question

I have two instances of a component on the same parent component and this child component makes an API call in the created lifecycle hook to populate a drop-down list. The list data will be the same for both instances of the child.

So the result is that when my parent component is loaded I'm actually calling the API twice which is unnecessary.

My question is if I want to just call the API once should I either move the API call to the parent and pass the drop-down list items to the child or use vuex and have the parent call an action that calls the API. The action would then save the items to state and the child component will access items via a store getter.

I'm tempted to use the vuex store as the list is small and might be needed elsewhere outside this current parent.

Scornwell · Accepted Answer · 2019-09-18 21:16:29Z

TLDR;

If you want to use it outside of the Parent-> child relationship use Vuex
If you know it will be simple and small, passing it down as a prop works just as well and reduces complexity of setting up the store.
Another option is to store it in localStorage, but this may be less reliable than you want as someone clearing their cache will lose functionality of the dropdown.

You can store it in a Vuex store allowing it to persist for anywhere in the application, however, if the parent is getting the list and it just needs to pass the list of dropdowns to the children, you could also just create a Prop in the children and pass the dropdown list that way.

The Children will have access to the dropdown items and you would not need to add the complexity of Vuex for a simple dropdown in a small app?

You mentioned the list not being very big, and if the dropdown is not something that the User is required to click every time or use, then having it as two API calls is not necessarily bad. You can just load the data when they attempt to access the dropdown at that point, which in some cases may save you and the customer the bandwidth of requesting a dropdown list when not needed.

Suhas Bhosale · Accepted Answer · 2019-09-18 17:55:00Z

0

You should go for Vuex store if you need to render same data to multiple components. Vuex store increases code complexity at initial setup level, but afterwords it is so simple and effortless to use API data in to the multiple components. It doesn't mean that use Vuex store in each application. If you are developing application that is progressive in nature and it will get more complex in future then start using Vuex store. It will help you in future developemnt. Here is all Vuex store details.

answered Sep 18, 2019 at 17:55

Suhas Bhosale

967 bronze badges

Collectives™ on Stack Overflow

Two vue components calling same API function

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related