Javascript Vuex存储未定义
我正在为我的应用程序使用vuex和axios,我想在axios initiation中使用getter来通过基本身份验证。这是我的axios init(http common.js): 当我调试我的应用程序时,我发现store未定义。有人能解释一下我做错了什么吗?存储本身在所有组件中都可以正常工作 我的商店有几个模块和那些模块。store index.js:Javascript Vuex存储未定义,javascript,vue.js,vuex,Javascript,Vue.js,Vuex,我正在为我的应用程序使用vuex和axios,我想在axios initiation中使用getter来通过基本身份验证。这是我的axios init(http common.js): 当我调试我的应用程序时,我发现store未定义。有人能解释一下我做错了什么吗?存储本身在所有组件中都可以正常工作 我的商店有几个模块和那些模块。store index.js: import m1 from './modules/m1' import m2 from './modules/m2' import au
import m1 from './modules/m1'
import m2 from './modules/m2'
import authentification from './modules/authentification'
Vue.use(Vuex)
export default new Vuex.Store({
modules: {
authentification,
m1,
m2
}
})
模块使用axios init函数调用REST api,即:
import HTTP from '@/common/http-common'
.....
const actions = {
action ({commit}) {
HTTP.get('item')
.then(response => {
commit('MUTATION', {response})
})
}
}
.....
export default {
state,
getters,
actions,
mutations
}
我认为这会在初始化存储之前创建循环并调用http common
编辑:根据请求添加身份验证模块:
import * as types from '../mutation-types'
const state = {
isLoggedIn: !!localStorage.getItem('auth'),
auth: JSON.parse(localStorage.getItem('auth'))
}
const getters = {
isLoggedIn: state => {
return state.isLoggedIn
},
authentification: state => {
return state.auth
}
}
const mutations = {
[types.LOGIN] (state) {
state.pending = true
},
[types.LOGIN_SUCCESS] (state) {
state.isLoggedIn = true
state.pending = false
},
[types.LOGOUT] (state) {
state.isLoggedIn = false
}
}
const actions = {
login ({
state,
commit,
rootState
}, creds) {
console.log('login...', creds)
commit(types.LOGIN) // show spinner
return new Promise(resolve => {
setTimeout(() => {
localStorage.setItem('auth', JSON.stringify(creds))
commit(types.LOGIN_SUCCESS)
resolve()
}, 1000)
})
},
logout ({ commit }) {
localStorage.removeItem('auth')
commit(types.LOGOUT)
}
}
export default {
state,
getters,
actions,
mutations
}
我找到了解决办法。我必须在调用之前分配auth,而不是在axios对象的初始化期间:
var axiosInstance = axios.create({
baseURL: 'http://localhost:8081/'
})
axiosInstance.interceptors.request.use(
config => {
config.auth = store.getters['authentification']
return config
}, error => Promise.reject(error))
export default axiosInstance
这实际上是Vue核心团队的Thorsten Lünborg(LinusBorg)向我展示的一个更好的解决方案:
在您在其中定义Axios实例并设置配置等的文件中,您还拥有一个Vuex插件,该插件监视您的存储,并根据存储中存在的任何身份验证令牌设置/删除您的授权头。身份验证模块在哪里?乍一看似乎不对,但我看不到所有的代码。@jostrander我添加了身份验证模块。但这不是问题。正如我所写的,问题是导入链。我正在进口这家商店,但它还没有被专门化。Auth模块本身工作正常,但如果我想在通用http中使用它,它是未定义的是,最好能显示有关解决方案如何工作的代码。这里有一个链接。你看不见吗?
var axiosInstance = axios.create({
baseURL: 'http://localhost:8081/'
})
axiosInstance.interceptors.request.use(
config => {
config.auth = store.getters['authentification']
return config
}, error => Promise.reject(error))
export default axiosInstance