I am wondering about where i should making call api.
Approach 1:
Call in component and handle sync then commit to Vuex.
Approach 2:
Dispatch from component and call api in action then commit Vuex.
So, Which approach best to use between making call api in component or Vuex ?
Personally, I think both methods are acceptable and it boils down to personal preference.
My personal preference would be Approach 1. where I make use of the created() lifecycle method to call the API and return the data in the Vue component itself.
After which, I would then dispatch the relevant data to the Vuex state using actions and mutations.
Related
I'm already familiar with how Redux saga works, my question is more around best-practices. I have an application in which I have actions which are dispatched, then intercepted by saga where it runs an API call, and then the saga dispatches another action, usually storing the data to the redux store.
My question is, what if I just need to call an API from my front-end but don't need to store the data in the redux store? Do I just call my API from the front-end directly (e.g. with axios/fetch API?) or do I have to use saga to fetch it?
In the second case where I use saga, how do I pass the data up from saga to the component (without adding the response data to the redux store)?
If you don't need the data in the store (component state is enough) then just querying the data directly from the component (via react-query or some other data fetching layer) is "better" in the sense that you don't have to "globalize" that data in your application state (don't need actions/reducers/selectors)
In Angular, there's a specific "service" layer intended to hold mockup services returning dummy data initially, which are replaced with real calls to the backing RESTful services as development on a project proceeds.
In Vue, is there a recommended location or layer in which to put such remote calls using axios? I can see them being placed inside the methods of a Vuex singleton or scattered through the script portions of single-file components... I imagine also that there might be some way to provide them to components via dependency injection.
What is the best practice?
Ty in advance.
Yes, if you're using Vuex, you can place Service components that wrap your Axios calls, which are then called from the vuex store.
So the hierarchy goes Component -> Store -> Service Component -> Axios
Actually, I work in web app with vuejs as frontend framework.
in a particular situation, I want to communicate two separate components.
I know there are many ways to do that, especially with vuex that can help us to create a maintainable application.
in my case, i found we can manipulate data between components by bus events and with mixins (by $emit and $on event) also.
for that, i want to know :
how bus events and mixin work exactly ?
what is the difference between them ?
A mixin is a partial component spec. You include mixins in a component to compose functionality.
An event bus is a communication channel on which events can be emitted and listened for. Every Vue instance is an event bus.
I want to create a VueJS mixin that adds a couple of methods to the parent. In order to do this I need to store some data too.
Is it possible to store data in a mixin that can be accessed by a component that uses the mixin?
You should use some centralised state mechanism or more popular option vuex to store the data and manipulate it from the methods of mixin.
Here's what I'm trying to do---add a listener to a fluxible event to do an ajax call. In Redux, this is called a side effect and there are several ways of doing this (ex: create "side effects" using redux-saga, which are just listeners that do stuff). In Flux, one approach is to do side effects in the Store.
What about fluxible?
From what I can tell, the way to do this is in the Store. But I don't see a way to get the context. So perhaps there's another way to do this?
You should do ajax call in action. Action receives context, where you could provide plugin to do http call. Stores should contain only application state and have only synchronous code.