0

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.

Milky_Way
  • 149
  • 1
  • 2
  • 7

2 Answers2

3

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.

James Stewart
  • 869
  • 12
  • 33
  • I didn't want to because i thought it was possible to achieve with only VueJS... But almost every solution i found mention VueX. So you're right maybe i should use it, i will try to understand it. – Milky_Way Sep 09 '19 at 14:50
  • 1
    It'll make your life easier. You could store it in localStorage, but Vuex is set up exactly for what you want to achieve. Good luck! – James Stewart Sep 09 '19 at 14:50
0

If you really don't wanna use Vuex, there're always solutions like nedb, but I'd strongly recommend Vuex.

Adrián S. Basave
  • 33
  • 2
  • 8