如何从 axios 请求服务文件访问 VueJS 数据

Question

我正在使用 VueJS 2 构建一个应用程序，下面的代码来自 src/utilities/request.js。这个 request.js 将从 src/api/usermodule.js 加载，以便调用 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

我的问题是如何 inject/set 将数据 App.vue 中的 data() 变量发送给用户，以便向用户发送正确的通知？

Answer 1

你应该在 mounted 阶段之后做，像这样：

data() {
  return {
    notifs: null
  }
},
mounted() {
  service ... .then(({ data }) => { this.notifs = data })
}

但是如果你想更新这个.js文件中的数据，你可以使用store。响应解决后，你可以改变一个状态，像这样，取决于你的代码：

store.commit('updateNotifs', notifs)

如何从 axios 请求服务文件访问 VueJS 数据

How to access VueJS Data from axios request service file

javascript

vue.js

axios