I am sorry if this question has already been asked, but i can't seem to find a clear explanation for my problem.
Problem: i have a web page showing a client's problem. This page need data like client ID or problem number to display it in different parts of the page (header, menu, body). This data is obtained with axios calls.
So i have multiple components which need the same data from the same axios call.
I can't understand how it is possible to make one axios call, for client ID for example, and share it with multiple components instead of making an axios call each time i need the data.
Are mixins a solution?
I have tried to use a mixin:
Vue.axiosGet({
methods: {
request: function(url) {
return axios.get(url).then(response => {
return response.data;
});
}
}
});
But now i don't know where or how to store the data i'll get.
EDIT: i forgot to precise that i don't want to use VueX.
You say that you don't want to use Vuex, but why not? I would recommend you use the Vuex store to achieve what you're looking for. A vuex store will cache/hold information in it, meaning that you can easily access it on a different page. Vuex would solve your problem and allow you make a call once, and later access the data. No need to re-invent the wheel, it's an effective way to achieve what you need.
If you really don't wanna use Vuex, there're always solutions like nedb, but I'd strongly recommend Vuex.
Related
So basically I have a simple vue app that is going to make requests to an API.
As there is no authentication, I need to make sure that during the vue app's life cycle (basically while the browser is open) the app will have access to some unique identifier that can be sent to the server.
In this way, the API will understand that it is the same "user" that is making requests.
As Im totally new to vue Im not really sure how I can accomplish this.
My first idea was to add code inside some global file (for example /src/App.vue) that could look like this:
if(!window.localStorage.getItem('session_id')){
let random = Array(5).fill().map(n=>(Math.random()*36|0).toString(36)).join('')
window.localStorage.setItem('session_id', random)
}
And then, when making API requests, I would attach it this way:
//pseudo code
request.header('session_id', window.localStorage.getItem('session_id')).get('endpoint1')
Is this the way to go? Or there are better ways?
I hope you are fine. I want to send a get request in nuxt3 without using composition api but I don't know how to do that. I will thank anyone who give me a piece of guidance.
Thanks.
async getPosters(){
const results = await this.$axios.get('posters')
this.posters = results.data
},
Write your code as you were used too with just Options API, nothing have changed on that matter.
You can totally use Options API while using Vue3/Nuxt3. They may have some small changes but nothing too major for a simple task of querying a backend.
It looks like this is more of an issue with trying to load Axios rather than it is with the composition API. Nuxt 3 makes Axios a redundant module.
Since Fetch is the go-to considered method of requesting data in Nuxt3, have you tried changing the method of your request? It means having to load one less module for your project, and will make it a lot easier to transition between SSR and Static in the future. If not, it might be worth using the previous version of Nuxt.
Here's the documentation: https://v3.nuxtjs.org/getting-started/data-fetching in Nuxt 3.
Before writing too much code, I thought I'd conceptually understand whether what I am doing is correct.
I have some components, that import a mixin. The mixin has a web api call to retrieve the some links from the (HATEOAS) API, so the UI can use the links without forming its own links. These would look something like:
[
{
"Rel": "GetSupportingData",
"Href": "https://api.com/SupportingData"
},
{
"Rel": "Search",
"Href": "https://api.com/Search"
}
]
So the MIXIN has a method called GetLink("Search") that would retrieve the links from the API and return the link requested.
This is all ok, but as the mixin is imported to a lot of components, I don't want each time its used to make the WEB API call to get the links before filtering them. I was therefore wondering if I should use Vuex to manage the state of the links and retrieve them if the store count was zero?
The examples of Vuex I have seen instantiate it on the component, so what I'm doing feels like it may not be correct.
You can store the web api links to store that is one approach, but when you refresh the page again the store needs to be filled with the api links
So, the alternate approach is to use localStorage or indexedDB of browser
Everytime when you load the application first it goes to localstorage or indexedDB and checks for the api links. If its present, it restores to Vues store. Or calling mixin method to fetch api links and loads to browser storage and vuex store
I've got a small Vue/Vuex/Rails app that I'm building and am trying to figure out the best way to handle this scenario.
Upon login or page refresh, I have a mixin that checks to see whether currentUser is in state. If it's not, it runs a call to my api to retrieve the currentUser, as well as that user's deeply nested relationships. Something like this:
currentUser: {
...user data
groups: [
categories: [
items: [
...item data
]
],
],
}
That api call lives in user.module.js. My question is, rather than storing the entire user object with all of its nested data in user state, is it possible to split out all of that data into separate modules (eg.: groups.module.js, categories.module.js, items.module.js)?
This would allow me to make a much simpler action and mutation by going straight to item in the items.module.js.
I appreciate any help!
Yes, definitely you should split them in multiple modules, otherwise, your data structure will get really difficult to deal and understand. After you have defined how will be structured your modules, when you get the user data you can dispatch as many actions you need to each module to populate their states.
I created a codepen to show you.
I am developing a front end mobile application with react-native and redux implementation. I had successfully pulled all the necessary real APIs. Now I want to create a function that can update the student's info. Fyi, I'm developing a student information system, so there's info like address and email that need to be updated if changes occur. I don't know how to do it, I heard people uses "lodash" which I dunno what it is for. And how do I save the updated changes?
To update state of redux, it is good idea to use helper like react-addons-update or immutability-helper. update() provides simple syntactic pattern to make writing state update code easier. Eg:
import update from 'immutability-helper';
function handleUpdateMydata(state, action){
return update(state,{
myData:{
$set:action.payload
}
})
}
To ensure your state is permanent store, you may use redux-persist
lodash is a library that is used for dealing with the arrays and objects. if you wanna know more about its content see the documentation here
Documentation
Now coming on to your real problem,since you are using redux I think you should create an action that would update your student details in the database