I have encountered an issue with my Vue project. I am using Vuex to manage the state and making axios requests. To handle the axios requests, I created a separate file with a predefined header setup like this:
import axios from 'axios'
import store from '../store/index'
export default axios.create({
baseURL: 'https://example.com/',
timeout: 1000,
headers: {
'X-Requested-With': 'XMLHttpRequest',
'Accept': 'application/json',
'Content-Type': 'application/json',
'Authorization': `Bearer ${store.getters.getToken}`
}
})
The problem I am facing is that the store is undefined in this case. I have tried importing the store into the /src/axios/request.js file using
import { store } from '../store/index'import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
Vue.use(Vuex)
export default new Vuex.Store({
namespaced: true,
modules: {
user
},
state: {
url: 'https://example.com/',
token: '',
},
getters: {
getToken: state => state.token
},
})
If anyone has a repository showcasing a project structure with Vuex modules and axios requests set up in a separate file with a predefined template, I would appreciate it if you could share it. I'm looking for guidance on how to better organize my project. Thank you for any assistance provided.