0
私のアプリケーションにはvuex、axiosを使用していますが、基本認証を渡すためにAxios Initiationでgetterを使用したいと思います。これは私のaxiosのinit(http-common.js)です:Vuexストアは定義されていません
import axios from 'axios'
import store from '@/store'
export default axios.create({
baseURL: 'http://localhost:8081/',
auth: store.getters['authentification']
})
私は私のアプリをデバッグしているとき、私はストアが未定義であると判断します。誰かが私が間違っていることを説明することはできますか?ストア自体はすべてのコンポーネントで正常に動作します。
私の店にはいくつかのモジュールとそれらのモジュールがあります。店舗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
}
})
をとモジュールは、すなわち、REST APIを呼び出すためのaxiosのinit関数を使用しています。
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-共通呼び出すと思います。
編集:要求されたとしてが真偽モジュールを追加:
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
}
認証モジュールはどこですか?それは一見したようには思われませんが、コードのすべてを見ることはできません。 – jostrander
@jostrander認証モジュールを追加しました。しかし、これは問題ではありません。私が書いたように、問題は輸入連鎖です。私は店を輸入していますが、それはまだ正式化されていません。 Authモジュール自体は正常に動作しますが、common-httpで使用する場合は未定義です –