I'm building an app using VueJS 2 and code below is from src/utilities/request.js. This request.js will be loaded from src/api/usermodule.js in order to call axios.
request.js
import atatus from 'atatus-spa'
import store from '@/store'
import { getToken } from '@/utilities/auth'
const service = axios.create({
baseURL: process.env.VUE_APP_BE,
timeout: 15000, // miliseconds
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
},
validateStatus: function (status) {
// return status >= 200 && status < 400
if(status >= 200 && status < 400) { return true }
if(status == 429) {
/**
* ########################################################
* # I want to set a 'data' variable in App.vue from here #
* ########################################################
*/
return true
} // Laravel throttle error
if(status == 419) { return true } // Laravel validation error
}
})
// request
service.interceptors.request.use(
async config => {
config.headers['Authorization'] = 'Bearer ' + getToken()
return await config
},
error => {
// Do something with request error
atatus.notify(new Error('Error: ' + error))
Promise.reject(error)
}
)
export default service
My problem and question is how can I inject/set data into a data() variable inside App.vue so that a proper notification can be send to the user?
You should do it after mounted phase, something like this:
data() {
return {
notifs: null
}
},
mounted() {
service ... .then(({ data }) => { this.notifs = data })
}
But if you want to update data inside this .js file, you can use store.
After response resolved you can mutate a state, something like this, depending on your code:
store.commit('updateNotifs', notifs)