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.
Related
How can I access a Vuex store from within a middleware?
I know Nuxt3 suggests using Pinia, but I had problems installing/integrating it due to dependencies conflicts, so I used the ol' good Vuex.
Problem is, in Nuxt3 my middleware has no access to the context object but just to the routes that are being navigated to/from.
So the question probably became: is that even possible or am I enforced to use Pinia?
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)
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.
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.