Vuex storeを読み込めない
お世話になっております。当方、Vue.js初心者でして皆様のお力を拝借したいです
環境
macOS Catalina
npm 6.14.5
vue@2.6.11
vuex@3.5.1
問題点
src/plugins/axios.jsでVuexのstoreを読み込みたいのですが、エラーが出るという問題です。
Componentでstoreにアクセスするにはmain.jsでstoreを読み込み、各Componentからthis.$storeのようにするというのは知っておりまして、実際に出来ております。
しかし、Componentではない普通のjsファイルからstoreにアクセスできないという状況です。
試した方法などはソースにコメントアウトしております。
ご教授いただけますと幸いです。宜しくお願い致します。
ソースは以下のようになります。
// src/plugins/axios.js
import axios from 'axios'
import store from '../store/index.js'
// 以下試したimport文
// import { store } from '../store/index'
// import store from '../store'
export default axios.create({
baseURL: process.env.VUE_APP_API_ENDPOINT,
headers: {
'Content-Type': 'application/json',
Authorization: store.state.authToken //エラー→ Cannot read property state of undefined
}
})
// src/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import axios from '../plugins/axios.js'
import createPersistedState from 'vuex-persistedstate'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
authToken: ''
},
mutations: {
setAuthToken(state, authToken) {
state.authToken = authToken
}
},
actions: {
getAuthToken(authToken) {
commit('setAuthToken', authToken)
}
}
})
export default store
1
