我有一个拦截器,我想在其中使用 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'
也无济于事。我已经尝试了几乎所有导入方式,我知道。没有任何帮助。
我错过了什么?
最佳答案
看起来您正在使用模块来为您的 getter 命名空间。要找出问题所在,为什么不首先尝试在没有模块的情况下执行此操作,如 store.getters.hasAccessToken
和 ...accessToken
中所示。如果可行,则可能是您的模块设置正确,特别是您可能错过了模块中的 namespaced: true
。请参阅:https://vuex.vuejs.org/modules.html
不要忘记在拦截器中返回配置对象。
就其值(value)而言,我使用了类似的东西并且在没有模块的情况下也能正常工作。看起来像这样:
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
})
}
}
关于javascript - Vue.js 2.如何在axios拦截器中使用Vuex,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50475431/