2017-12-16 6 views
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 
} 
+0

認証モジュールはどこですか?それは一見したようには思われませんが、コードのすべてを見ることはできません。 – jostrander

+0

@jostrander認証モジュールを追加しました。しかし、これは問題ではありません。私が書いたように、問題は輸入連鎖です。私は店を輸入していますが、それはまだ正式化されていません。 Authモジュール自体は正常に動作しますが、common-httpで使用する場合は未定義です –

答えて

0

私はsollutionを発見しました。私はコールの前にauthを割り当てなければなりませんでした。アキシャイオスのinaticization中ではありませんでした。オブジェクト:

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 
関連する問題