Vuex 商店未定义
Vuex store is undefined
我正在为我的应用程序使用 vuex、axios,我想在 axios 启动中使用 getter 来通过基本身份验证。这是我的 axios init (http-common.js):
import axios from 'axios'
import store from '@/store'
export default axios.create({
baseURL: 'http://localhost:8081/',
auth: store.getters['authentification']
})
当我调试我的应用程序时,我发现商店未定义。有人可以解释我做错了什么吗? Store 本身在所有组件中工作正常。
我的商店有几个模块和那些模块。商店 index.js:
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) 向我展示的一个更好的解决方案:
https://codesandbox.io/s/vn8llq9437
在您定义 Axios 实例并设置配置等的文件中,您还有一个 Vuex 插件可以监视您的商店和 sets/deletes 您的授权 header 基于存在您商店中的任何身份验证令牌。
我正在为我的应用程序使用 vuex、axios,我想在 axios 启动中使用 getter 来通过基本身份验证。这是我的 axios init (http-common.js):
import axios from 'axios'
import store from '@/store'
export default axios.create({
baseURL: 'http://localhost:8081/',
auth: store.getters['authentification']
})
当我调试我的应用程序时,我发现商店未定义。有人可以解释我做错了什么吗? Store 本身在所有组件中工作正常。
我的商店有几个模块和那些模块。商店 index.js:
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) 向我展示的一个更好的解决方案:
https://codesandbox.io/s/vn8llq9437
在您定义 Axios 实例并设置配置等的文件中,您还有一个 Vuex 插件可以监视您的商店和 sets/deletes 您的授权 header 基于存在您商店中的任何身份验证令牌。