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?

Since you are importing store, you could commit something to the store and display it in App.vue — pxljoy
– pxljoy, Commented Feb 17, 2022 at 12:55

F.NiX · Accepted Answer · 2022-02-18 11:35:30Z

0

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)

edited Feb 18, 2022 at 11:35

answered Feb 17, 2022 at 13:40

F.NiX

1,5033 gold badges13 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

MieSaF Over a year ago

It is not a .vue file. It is a normal .js file that configure axios settings.

MieSaF Over a year ago

Thank you. Both pxljoy and F.NiX gave me an idea how it can be done - using Vue store

Collectives™ on Stack Overflow

How to access VueJS Data from axios request service file

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related