Vuex storage nie jest dostępny w Axios HTTP interceptorze

Question

Piszę front przy użyciu vue2js, vuex oraz biblioteki Axios.

Jeżeli backend wyśle error 401 to próbuję wywołać (w dokumentacji nazywa się to commitem) mutację logout, która usuwa token z mojego vuex storage oraz przestawia zmienną boolean na false. Ogólnie wywołuję również inną mutacje z innego miejsca w moim SPA i tam wszystko działa jak należy ale gdy staram się wywołać mutację z interceptora to dostaję taki błąd:

TypeError: Cannot read property '$store' of undefined

at eval (httpInterceptor.js?bdcd:22)

Kod mojego interceptora

import axios from 'axios';
import { store } from '../store/store';

export default function execute() {

    axios.interceptors.request.use((config) => {
         /* not related to issue */
    });

    axios.interceptors.response.use((response) => {
        return response;
    }, (err) => {
        console.log(err.response.status);
        if(err.response.status === 401) {
            this.$store.commit('logout');
        }
        console.log('err'); // this doesnt even console log
        return Promise.reject(err);
    });

}

Jest on zaimportowany do pliku main.js (jest to entry point mojego bundlera) i tam też wywołany. 

Mój vuex storage to:

import Vue from 'vue';
import Vuex from 'vuex';
import createPersistedState from 'vuex-persistedstate'

Vue.use(Vuex);

export const store = new Vuex.Store({
    state: {
        logged: false,
        token: ''
    },
    mutations: {
        login: (state, response) => { 
           /* not related */
        },
        logout: (state) => {
            state.logged = false;
            state.token = '';
        }
    },
    plugins: [
        createPersistedState()
    ]
});

Mój vuex jest również zaimportowany do main.js i poprawnie przypisany do Vue instance ( chodzi mi o to new Vue({...}); ).

Próbowałem zmienić scope zamieniając te arrow funkcje na zwykłe ale to nic nie zmieniło, dalej miałem identyczny błąd.

Skąd ten błąd? Czemu nie mogę " komitnąć " mojej mutacji?

Answer 1

import { store } from '../store/store';

Zaimportowałeś store jako zmienną store. Użyj zmiennej store.

Comments

Tsaaa. zmyliły mnie przykłady z dokumentacji, bo tam było pokazane jak używać tego w metodach komponentu

Answer 2

Błąd pojawia się, ponieważ masz problem z this. Aby móc użyć konstrukcji 

this.$store

this musi być ustawiony na instancję Vue, podczas gdy w twoim interceptorze tym this jest po prostu funkcja execute()

Comments

Spróbowałem zmienić scope na ten w którym importuje vue i axios:

import axios from 'axios';
import { store } from '../store/store';
const that = this;

export default function execute() {

    axios.interceptors.request.use((config) => {
        const token = store.state.token;
        if(token) {
            config.headers.Authorization = `Bearer ${token}`;
            return config;
        } else {
            return config;
        }
    }, (err) => {
        return Promise.reject(err);
    });

    axios.interceptors.response.use((response) => {
        return response;
    }, (err) => {
        console.log(err.response.status);
        if(err.response.status === 401) {
            that.$store.commit('logout');
        }
        console.log('err'); // this doesnt even console log
        return Promise.reject(err);
    });

}

i błąd jest nadal ten sam.

---

A przeczytałeś o co mi chodzi? W tej chwili this to obiekt globalny window, który nie ma właściwości $store.