vue3.0中axios的安装以及axios挂载产生的问题

时间:2024-03-28 20:09:41

1、通过指令 npm install axios -S 安装axios

vue3.0中axios的安装以及axios挂载产生的问题

2、通过指令npm install vue-axios -S 安装vue-axios(注意:有时候我们在pack.json中看到vue-axios已经安装上去了,但是可能存在明明安装了,在组件中无法使用,因此需要重新安装vue-axios,这个在vue3.0中有80%的几率发生)

vue3.0中axios的安装以及axios挂载产生的问题

3、删除node_modules包(在vue3.0中存在安装了依赖,包不生效的问题,因此需要删除包,重新安装依赖包,也可以选择不删除)

4、在main.js全局配置axios(在vue3.0中引入了一个新的函数名createApp,会把容器挂载到它上面来,因此我们会新命名一个变量const app = createApp(App),方便我们后期挂载依赖,createApp(App)类似于2.0中的Vue,同时vue2.0中是通过Vue.prototype.$axios = axios 进行挂载的,vue3.0要通过app.config.globalProperties.$axios = axios进行挂载)

vue3.0中axios的安装以及axios挂载产生的问题

5、在组件中使用axios(在Vue2.x版本中频繁出现的this,在Vue3.0中也消失了,取而代之的是Composition API提供的getCurrentInstance方法,用来获取当前组件实例,然后通过ctx获取当前上下文)

vue3.0中axios的安装以及axios挂载产生的问题

6、执行

vue3.0中axios的安装以及axios挂载产生的问题