Styjun

Check if two datetimes are between two others

Prime joint compound before latex paint?

New order #4: World

If a centaur druid Wild Shapes into a Giant Elk, do their Charge features stack?

Could a US political party gain complete control over the government by removing checks & balances?

What are the advantages and disadvantages of running one shots compared to campaigns?

What is the meaning of "of trouble" in the following sentence?

How many letters suffice to construct words with no repetition?

Need help identifying/translating a plaque in Tangier, Morocco

Calculate Levenshtein distance between two strings in Python

"listening to me about as much as you're listening to this pole here"

Is every set a filtered colimit of finite sets?

Can a planet have a different gravitational pull depending on its location in orbit around its sun?

Manga about a female worker who got dragged into another world together with this high school girl and she was just told she's not needed anymore

Are cabin dividers used to "hide" the flex of the airplane?

How can I add custom success page

Why do UK politicians seemingly ignore opinion polls on Brexit?

Shall I use personal or official e-mail account when registering to external websites for work purpose?

Is Social Media Science Fiction?

Is ipsum/ipsa/ipse a third person pronoun, or can it serve other functions?

Pristine Bit Checking

What's the difference between repeating elections every few years and repeating a referendum after a few years?

Denied boarding due to overcrowding, Sparpreis ticket. What are my rights?

Hosting Wordpress in a EC2 Load Balanced Instance

Axios interceptor doesn't update the Vuex state

Axios interceptors and asynchronous loginVuex with axios call, context is unknown when the promise resolvesBest Practice in Error Handling in Vuejs With Vuex and AxiosCan't access Vuex storage mutation inside Axios interceptorVuex store is undefined in NUXT middlewareVue.js: Uncaught promises in vuex actionsStorage not working properly in vuex axios responseHow to make Vuex state update after axios callNuxt-Axios post with header and bodyNuxt Error: [vuex] Do not mutate vuex store state outside mutation handlers when mutating from plugin

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;

0

I would like to show a spinner using an axios interceptor by setting the state from true upon request and false on response.

services/apiClient.js

import store from '../store/index';

axiosClient.interceptors.request.use(function (config) 
 store().commit('SET_LOADING_STATUS', true);
 return config;
, function (error) 
 return Promise.reject(error);
);

axiosClient.interceptors.response.use(function (response) 
 store().commit('SET_LOADING_STATUS', false);
 if (response.data.status.code != 200) 
 throw message: response.data.status.errorDetail ;
 else 
 return response;
 
, function (error) 
 return Promise.reject(error);
);

then on my Vuex store/index.js

import Vuex from 'vuex';
 const store = () => 
 return new Vuex.Store(
 state: 
 isLoading: null
 ,
 mutations: 
 SET_LOADING_STATUS(state, bool) 
 console.log(bool);
 state.isLoading = bool;
 
 ,
 actions: 
 setLoadingStatus( commit , bool) 
 commit('SET_LOADING_STATUS', bool);
 
 ,
 getters: 
 loadedState(state) 
 return state.isLoading;
 
 
 );
;

export default store;

I'm getting the true and false here from console.log

but when I'm getting it from my layouts/default.vue

<template>
 <div>
 isLoading
 <nuxt/>
 </div>
</template>

<script> 
 export default 
 computed: 
 isLoading() 
 console.log(this.$store.getters.loadedState);
 return this.$store.getters.loadedState;
 
 
 
</script>

the isLoading computed property returns null I'm expecting this should return false because on response interceptor from axios I'm setting it to false

In my index.vue I'm triggering the request from axios

<template>
 <div> 
 <h1> Index Page </h1>
 </div>
</template>

<script>
 export default 
 created() 
 this.$store.dispatch('getUsers', this); // this will trigger API call
 
 
</script>

javascript axios nuxt.js

share|improve this question

asked Mar 22 at 1:50

Allen ChunAllen Chun

1,6921937

add a comment | 

0

I would like to show a spinner using an axios interceptor by setting the state from true upon request and false on response.

services/apiClient.js

import store from '../store/index';

axiosClient.interceptors.request.use(function (config) 
 store().commit('SET_LOADING_STATUS', true);
 return config;
, function (error) 
 return Promise.reject(error);
);

axiosClient.interceptors.response.use(function (response) 
 store().commit('SET_LOADING_STATUS', false);
 if (response.data.status.code != 200) 
 throw message: response.data.status.errorDetail ;
 else 
 return response;
 
, function (error) 
 return Promise.reject(error);
);

then on my Vuex store/index.js

import Vuex from 'vuex';
 const store = () => 
 return new Vuex.Store(
 state: 
 isLoading: null
 ,
 mutations: 
 SET_LOADING_STATUS(state, bool) 
 console.log(bool);
 state.isLoading = bool;
 
 ,
 actions: 
 setLoadingStatus( commit , bool) 
 commit('SET_LOADING_STATUS', bool);
 
 ,
 getters: 
 loadedState(state) 
 return state.isLoading;
 
 
 );
;

export default store;

I'm getting the true and false here from console.log

but when I'm getting it from my layouts/default.vue

<template>
 <div>
 isLoading
 <nuxt/>
 </div>
</template>

<script> 
 export default 
 computed: 
 isLoading() 
 console.log(this.$store.getters.loadedState);
 return this.$store.getters.loadedState;
 
 
 
</script>

the isLoading computed property returns null I'm expecting this should return false because on response interceptor from axios I'm setting it to false

In my index.vue I'm triggering the request from axios

<template>
 <div> 
 <h1> Index Page </h1>
 </div>
</template>

<script>
 export default 
 created() 
 this.$store.dispatch('getUsers', this); // this will trigger API call
 
 
</script>

javascript axios nuxt.js

share|improve this question

asked Mar 22 at 1:50

Allen ChunAllen Chun

1,6921937

add a comment | 

I would like to show a spinner using an axios interceptor by setting the state from true upon request and false on response.

services/apiClient.js

import store from '../store/index';

axiosClient.interceptors.request.use(function (config) 
 store().commit('SET_LOADING_STATUS', true);
 return config;
, function (error) 
 return Promise.reject(error);
);

axiosClient.interceptors.response.use(function (response) 
 store().commit('SET_LOADING_STATUS', false);
 if (response.data.status.code != 200) 
 throw message: response.data.status.errorDetail ;
 else 
 return response;
 
, function (error) 
 return Promise.reject(error);
);

then on my Vuex store/index.js

import Vuex from 'vuex';
 const store = () => 
 return new Vuex.Store(
 state: 
 isLoading: null
 ,
 mutations: 
 SET_LOADING_STATUS(state, bool) 
 console.log(bool);
 state.isLoading = bool;
 
 ,
 actions: 
 setLoadingStatus( commit , bool) 
 commit('SET_LOADING_STATUS', bool);
 
 ,
 getters: 
 loadedState(state) 
 return state.isLoading;
 
 
 );
;

export default store;

I'm getting the true and false here from console.log

but when I'm getting it from my layouts/default.vue

<template>
 <div>
 isLoading
 <nuxt/>
 </div>
</template>

<script> 
 export default 
 computed: 
 isLoading() 
 console.log(this.$store.getters.loadedState);
 return this.$store.getters.loadedState;
 
 
 
</script>

the isLoading computed property returns null I'm expecting this should return false because on response interceptor from axios I'm setting it to false

In my index.vue I'm triggering the request from axios

<template>
 <div> 
 <h1> Index Page </h1>
 </div>
</template>

<script>
 export default 
 created() 
 this.$store.dispatch('getUsers', this); // this will trigger API call
 
 
</script>

javascript axios nuxt.js

share|improve this question

asked Mar 22 at 1:50

Allen ChunAllen Chun

1,6921937

import store from '../store/index';

axiosClient.interceptors.request.use(function (config) 
 store().commit('SET_LOADING_STATUS', true);
 return config;
, function (error) 
 return Promise.reject(error);
);

axiosClient.interceptors.response.use(function (response) 
 store().commit('SET_LOADING_STATUS', false);
 if (response.data.status.code != 200) 
 throw message: response.data.status.errorDetail ;
 else 
 return response;
 
, function (error) 
 return Promise.reject(error);
);

import Vuex from 'vuex';
 const store = () => 
 return new Vuex.Store(
 state: 
 isLoading: null
 ,
 mutations: 
 SET_LOADING_STATUS(state, bool) 
 console.log(bool);
 state.isLoading = bool;
 
 ,
 actions: 
 setLoadingStatus( commit , bool) 
 commit('SET_LOADING_STATUS', bool);
 
 ,
 getters: 
 loadedState(state) 
 return state.isLoading;
 
 
 );
;

export default store;

<template>
 <div>
 isLoading
 <nuxt/>
 </div>
</template>

<script> 
 export default 
 computed: 
 isLoading() 
 console.log(this.$store.getters.loadedState);
 return this.$store.getters.loadedState;
 
 
 
</script>

<template>
 <div> 
 <h1> Index Page </h1>
 </div>
</template>

<script>
 export default 
 created() 
 this.$store.dispatch('getUsers', this); // this will trigger API call
 
 
</script>

share|improve this question

asked Mar 22 at 1:50

Allen ChunAllen Chun

1,6921937

share|improve this question

asked Mar 22 at 1:50

Allen ChunAllen Chun

1,6921937

asked Mar 22 at 1:50

Allen ChunAllen Chun

1,6921937

asked Mar 22 at 1:50

Allen ChunAllen Chun

1,6921937