Get $store data in ~/plugins/axios - vue.js

Question

I'm new with VueJs, I'm finding best way to get $store data in ~/plugins/axios in VueJS in order to use it for APIs. But some errors occur. Hope your helps
~/plugins/axios.js
import axios from 'axios'
import store from '~/store'
var api = axios.create({
baseURL: 'http://localhost:8000/api/v1/',
headers: {'Authorization': 'JWT ' + store.state.token}
})
export default api
Errors:
Issues: Can't tranmit store in to axios.create, so store is not defined
My ~/Store.JS:
const AuthenticationStore = () => {
return new Vuex.Store({
state: {
token: null
},
mutations: {
SET_TOKEN: function (state, token) {
state.token = token
instance.defaults.headers = { Authorization: 'Bearer ' + token }
}
},
actions: {
....
}
})
}
const createStore = () => {
return AuthenticationStore
}
export { AuthenticationStore }
export default createStore
Error:
Cannot read property 'token' of undefined in 'headers': {'Authorization': 'JWT ' + store.state.token}

Answer 1

You could do this in your mutation:
{
SET_TOKEN: function (state, token) {
state.token = token;
Vue.axios.defaults.headers.common['Authorization'] =
(token ? ('JWT ' + token) : '');
}
Every time you set a token in a mutation you update your default token, so you won't have to set it in each request you do. Could do this in an action as well.
That's assuming you have your axios available globally via this.axios. There's a VueAxios library just for that. Make sure you do this in your entry js file (main.js probably):
import axios from 'axios';
import VueAxios from 'vue-axios';
Vue.use(VueAxios, axios);
That way you'll never have to import your store or axios when you need to make a request. Your typical request would look like this:
this.axios.get('URL', {data}, {options});

Answer 2

import axios from 'axios'
import store from '../store'
var api = axios.create({
baseURL: 'http://localhost:8000/api/v1/',
headers: {'Authorization': 'JWT ' + store.state.token}
})
export default api
You need to import your store.
If you are using Nuxt.js the default store will be in classic mode. It will export a function that create a vuex store.
import Vuex from 'vuex'
import mutations from './mutations'
const createStore = () => {
return new Vuex.Store({
state: {
counter: 0
},
mutations
})
}
export default createStore
So you can fix the new error by switching to modules mode https://nuxtjs.org/guide/vuex-store#modules-mode.
Or edit your store/index.js to the following strucutre
import Vuex from 'vuex'
import mutations from './mutations'
cosnt store = new Vuex.Store({
state: {
counter: 0
},
mutations
})
const createStore = () => {
return store
}
export { store }
export default createStore
and change the import statement in ~plugins/axios.js to import { store } from '../store'