vue全家桶进阶之路46：Vue3 Axios拦截器和globalProperties全局设置

2023-04-20 20:12 由城南城南发表于 #前端开发

在Vue.js 3中，使用Axios与Vue.js 2.x中类似，但是需要进行一些修改和更新，下面是Vue.js 3中Axios的定义和使用方式：

首先，你需要安装Axios和Vue.js 3.x，可以使用npm或yarn等包管理工具安装：

npm install axios vue@next

然后，在你的Vue.js 3应用程序中，你可以使用以下代码来导入和使用Axios：

import { ref } from 'vue'
import axios from 'axios'

export default {
  setup() {
    const data = ref(null)
    const error = ref(null)

    axios.get('/api/data')
      .then(response => {
        data.value = response.data
      })
      .catch(error => {
        error.value = error
      })

    return { data, error }
  }
}

上面的代码使用Axios发出一个GET请求，从API端点/api/data获取数据，并将响应数据赋值给Vue组件的data变量中，如果请求出错，则将错误信息赋值给error变量。

注意，在Vue.js 3中，使用Axios时，需要将其包装在Vue 3的Reactivity API中，例如，上面的代码中，使用了Vue 3的ref函数将data和error变量转换为响应式对象。

除此之外，在Vue.js 3中，你可以将Axios作为插件使用，并在Vue实例中进行全局配置。下面是一个示例：

import { createApp } from 'vue'
import axios from 'axios'
import App from './App.vue'

const app = createApp(App)

app.config.globalProperties.$axios = axios
// 在这里添加更多的全局配置

app.mount('#app')

上面的代码将Axios作为Vue的插件，并将其添加到Vue实例的全局属性$axios中，以便在应用程序的任何组件中使用。

总之，Vue.js 3中的Axios使用与Vue.js 2.x基本相同，但需要使用Vue 3的Reactivity API将数据转换为响应式对象。此外，你可以将Axios作为Vue的插件使用，并在Vue实例中进行全局配置。

globalProperties

globalProperties 是 Vue 3 中的一个全局配置对象，它允许你在应用程序的任何地方添加自定义的全局属性和方法。

在 Vue.js 3 中，你可以使用 app.config.globalProperties 对象添加全局属性和方法，这样在 Vue 实例中就可以直接访问它们，而不需要在每个组件中都进行导入。

例如，你可以通过以下方式在 globalProperties 中添加一个全局属性 $myGlobalData：

const app = createApp(App)

app.config.globalProperties.$myGlobalData = { name: 'John', age: 30 }

app.mount('#app')

这样，在 Vue 组件中就可以通过 $myGlobalData 访问这个全局属性：

export default {
  setup() {
    const data = ref($myGlobalData)
    return { data }
  }
}

同样，你也可以在 globalProperties 中添加全局方法：

const app = createApp(App)

app.config.globalProperties.$myGlobalMethod = function() {
  console.log('This is a global method!')
}

app.mount('#app')

然后，在 Vue 组件中就可以通过 $myGlobalMethod() 调用这个全局方法：

export default {
  setup() {
    $myGlobalMethod() // 输出：This is a global method!
  }
}

需要注意的是，globalProperties 中添加的全局属性和方法会在所有 Vue 组件中共享，并且会被所有组件实例继承。因此，你需要确保添加的全局属性和方法不会与组件实例中的属性和方法冲突。