1

I have created several components (tables, selects, etc) and all use the same methods to get API information.

The purpose is to use these components on different pages of the application and as such, so that one can use the same component (eg table) regardless of the information it receives, I have created a number of methods to allow this.

However, to apply these methods to all components requesting the API, you would have to repeat a lot of code, and as such the goal is to create these methods globally.

After a search I found three ways to do it, with Plugins, Mixins and Vuex. However I do not know what is the most ideal way to do this.

Any suggestion?

Improve this question

2 Answers 2

Reset to default
1

Go with Vuex.

Create a centralized store where your components interact with its data using getters, actions and mutations, and the store knows how to interact with the API.

For example, your table component can be dumb, and just expect a :data=someData that the component that initializes the table passes to it, then it just renders whatever was passed. This someData can be mapped to a Vuex getter (or directly to an item in the store state) in the parent component.

When your component needs to have something submitted to the API, it can trigger an event the parent will pick up and call the appropriate action or mutation on the store, the store will know what to call in the API to do this action. So, even your parent isn't completely aware on how the API works, just your abstraction of if, represented by your Vuex store.

I have created a very simple todos application last week for another question here, feel free to have a look, uses Vue, Vuex and saves the data to Firebase. It also doesn't implement REST as it could, but it isn't too hard to change the store to use the proper REST methods get, post, put, delete etc.

All the relevant code of this application in in App.vue and store.js, with one line in main.js just to add the store to the Vue instance.

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

Thanks for the suggestion and example, I'll try applying in my project: D
Should have mentioned, but you can just clone the project and run npm install and npm run serve.
Imagine that I call the same component on the same page, the state will get the last occurrence. Basically what I did was pass through the props keys that this component will need and then I created an action in vuex that runs through the keys and will get the values of those keys the information I get from the API. But there it is when I call the same component on the same page this information will be the last occurrence, due to I change the state. What approach should I take in these cases?
I thought the state divide by keys, type {component1: [data], component2: [data2]} Type, you think it's a good practice to have a generic method where I get certain keys and I'll fetch information depending on them or create a state for each order?
Can you update the question with an example? Easier for reading the code.
|
1

Vuex will help with shared/own components state. If your problem is how to manage shared API call Vuex persi won't tackle that problem directly. It will help you once you get that data accessible to your components.

That said, you can create a module to do the API call and retrieve data, say:

http.js

export const getUser = async id => {      
  const response = await fetch(`/user/${id}`)
  return await response.json()
}

export const getContent = async id => {      
  const response = await fetch(`/content/${id}`)
  return await response.json()
}

This is a solution that will help you both with or without Vuex, now you can call those methods from anywhere.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.