Перехватчик Axios не обновляет состояние Vuex - PullRequest
Новая
       25

Перехватчик Axios не обновляет состояние Vuex

0 голосов
/ 22 марта 2019

Я хотел бы показать счетчик, использующий перехватчик axios, установив состояние из true по запросу и false по ответу.

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);
});

затем в моем 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;

Я получаю true и false здесь из console.log

но когда я получаю его из моего 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>

вычисленное свойство isLoading возвращает null Я ожидаю, что это должно вернутьfalse потому что при перехватчике ответа от axios я устанавливаю значение false

В моем index.vue я запускаю запрос от axios 

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

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