Vue.js 2.如何在axios攔截器中使用Vuex

Question

我有一個攔截器，我想在其中使用Vuex getter，但是，當我導入store ，會收到undefined 。

這是我的src/plugins/http.js代碼：

import Vue from 'vue'
import store from '../store'
import axios from 'axios'


axios.interceptors.request.use(
    (config) => {
        if (store.getters['auth/hasAccessToken']) {
            config.headers['Authorization'] = 'Bearer ' + store.getters['auth/accessToken']
        }
    }
);

這是我的src/store/index.js代碼：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

export default new Vuex.Store({
    //...
});

import store from '../store'也import store from '../store' 。 我知道，我嘗試了幾乎所有的導入方式。 沒有任何幫助。

我想念什么？

Answer 1

看起來您正在使用模塊對獲取器進行命名空間。 為了找出問題所在，為什么不嘗試在沒有模塊的情況下首先這樣做，就像在store.getters.hasAccessToken和...accessToken 。 如果可行，則可能是您已正確設置模塊，特別是您可能錯過了namespaced: true在模塊中為namespaced: true 。 請參閱： https ： //vuex.vuejs.org/modules.html

不要忘記在攔截器中也返回配置對象。

對於它的價值，我使用類似的東西，並且沒有模塊也可以正常工作。 看起來像這樣：

import axios from 'axios'
import store from '../store'

export default class BaseDataService {
  constructor () {
    this.http = axios.create({baseURL: '/api/'})

    this.http.interceptors.request.use(config => {
      config.headers.Authorization = 'Bearer ' + store.state.principal.token
      return config
    })
  }
}