How to access VueJS Data from axios request service file

Question

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?

Answer 1

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)