I changed the axios boot file like below by adding Vue.mixin instead of Vue.prototype. But now when I try to access this.$axios.post() in .vue component its throwing TypeError: Cannot read property 'post' of undefined. So the global mixin is not passing into components. I simply copied the mixin logic from here.
( didnt try the injection part as written in this post as I got stuck before
that part and trying to understand whats happening :))
import Vue from 'vue'
import axios from 'axios'
import { Cookies } from 'quasar'
Vue.mixin({
beforeCreate () {
const options = this.$options
if (options.axios) {
this.$axios = options.axios
} else if (options.parent) {
this.$axios = options.parent.$axios
}
}
})
export default function ({ app, ssrContext, store, router }) {
const axiosInstance = axios.create({
baseURL: 'http://lvh.me:3000',
headers: {
'Content-Type': 'application/json'
}
})
const cookies = process.env.SERVER
? Cookies.parseSSR(ssrContext)
: Cookies
axiosInstance.interceptors.request.use(config => {
const userString = cookies.get('user')
if (userString) {
// setup vuex
store.$db().model('users').create({
data: userString.user
})
// setup headers
config.headers.Authorization = `bearer ${userString.token}`
}
return config
}, error => {
return Promise.reject(error)
})
axiosInstance.interceptors.response.use(
response => response,
error => {
// if login route no need to reload
if (error.response.status === 401 && router.currentRoute.path !== '/login') {
// store.$db().model('users').logout()
cookies.remove('user')
location.reload()
}
return Promise.reject(error)
}
)
app.$axios = axiosInstance
}
I changed the
axiosboot file like below by addingVue.mixininstead ofVue.prototype. But now when I try to accessthis.$axios.post()in.vuecomponent its throwingTypeError: Cannot read property 'post' of undefined. So the global mixin is not passing into components. I simply copied the mixin logic from here.Any insights on what could be the issue here?
this would be:
Thank you.