Implement an http response in store is an anti-pattern

[cmartinezrazola]

Implement an http response in store is an anti-pattern

[mrichar1]

Hi,

I'm not sure I agree with you at all here, but I'm happy to discuss further. My main issues are:

1. The store represents the DOM of the Vue Single Page Application. No, the jsonapi-vuex store is set up as a module, and represents the API, in a restructured format. It is in no way connected to the DOM of the SPA, and can be used without ever instantiating a DOM. It is not the root store.

2. it is an anti-pattern to put the json:api document from the http service in the Vue store. No - making API calls in stoe actions is a commonly recommended approach to dealing with async data from API requests in Vue applications. An example of this is even given in the official Vuex documentation: https://vuex.vuejs.org/guide/actions.html#dispatching-actions

3. Instead of that implement a plain Node.js module outside Vue Components. No - by using a Vuex module with it's own store, we get all the benefits of separation of concerns, with a Vuex-standard way to access the data. If you want to access the API and restrcutre the results, this restructured data must be made available to the Vue app. Vuex getters on a store are a much more efficient and neat solution than a vanilla app with it's own non-standard store, and an extra 'wrapper' that translates between Vue and this external module.

4. why to load the document in the store?. Because otherwise every data access will either require a new request to the API (inefficient), or the end-user will be responsible for storing the restructured data that is passed to them. Since they're using Vue, and Vuex is the de-facto store, they'd likely want to store it in Vuex, so why not do this initially?

[cmartinezrazola]

Hi, I recognize I am just a beginner on IT. (hobby developer). I am reading your answers to see if you might be right.
I have still my main objection but I am not sure to be right:
https://vuex.vuejs.org/guide/actions.html#dispatching-actions

I believe in the Vue documentation they describe an action in the store that consist of:

1. An asynchronous http request to a http service (or microservice)
2. Load that json:api document response in some temporary variable
3. mutate some data in the store according the information received + some postprocessing

But the http response document from the microservice is not loaded in the store of the Single Page Application because this information is data that the SPA needs to know but not data of the SPA state itself.
Keep this sentence: The http response is not state data of the SPA

[mrichar1]

The steps you describe in 1-3 above is effectively what jsonapi-vuex is doing. It makes an http request to a RESTFUL api, translate the 'raw' JSONAPI data into restructured data, and then commits that to the store.

In the Vuex documentation example, the data fetched from the API and committed to the store is information on a shopping cart transaction. While there is no example SPA code, it seems obvious that the SPA is going to display the state of the shopping cart success/failure. I'm not sure how this doesn't count as state data of the SPA.

For completeness it's worth adding that jsonapi-vuex uses a module, not the 'default' or 'root' store. This means that all the data is kept in it's 'own area' under the jv store module name. If the SPA has it's own state, then this will be kept separate from the API data.

It's also worth noting that if you object to storing API data in a Vuex store, then the module can be used without touching a store at all. Simply use the search action and the (restructured) data will be returned from the action as usual, but no store changes will be made.

Of course this then means that any tracking of state changes has to be done yourself in your own code. For this you probably want to use some kind of standalone store - such as a Vuex store module...

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.