Vue+Typescript中在Vue上挂载axios使用时报错问题

在vue项目开发过程中，为了方便在各个组件中调用axios，我们通常会在入口文件将axios挂载到vue原型身上，如下：
main.ts

import Vue from 'vue'
import axios from './utils/http'
Vue.prototype.$axios = axios;

这样的话,我们在各个组件中进行请求时，就可以直接使用this.$axios，但是在ts中使用this.$axios进行请求时，会进行报错,如下所示：

从图中我们可以看出ts在Vue身上检测不到$axios。通过
在网上查阅发现：在ts中，不识别vue下面挂$axios，不可以挂在原型链上。也就是说我们手动在Vue原型身上挂载$axios,ts无法识别到。

解决方法1：手动告诉ts忽略这里的类型检测

虽然ts无法检测到Vue原型身上的prototype,但是实际上我们是挂载成功的，也就是说我们是可以正常使用的，唯一需要解决的是ts的类型检测问题，因此，我们可以指定this为any类型，这样的话就可以避免报错问题。如下所示：

(this as any).$axios
  .post("/api/users/login", this.ruleForm)
  .then((res: {data:any}) => {}

但是使用any意味着失去了类型安全保障，并且你得不到工具的支持。

解决方法2：使用vue-axios这个包来处理这个挂载问题

我们可以通过使用vue-axios这个包来处理这个挂载问题。vue-axios 是在axios基础上扩展的插件，在Vue.prototype原型上扩展了$http等属性，可以更加方便的使用axios。

# 安装
npmi axios
npm i vue-axios -S
# 注册
Vue.use(axios,vue-axios)
# 使用
this.axios()

通过使用vue-axios包,我们可以直接使用this.axios进行调用。

从上面我们可以看出vue-axios帮助我们实现了在Vue原型身上挂载axios，而且能够被ts检测到。这样就完美避免了ts报错的问题。

说明

使用ts进行开发的过程中，会遇到各种各样的报错问题，希望记录下来，避免下次再次踩坑，也希望帮助其他人。

总结

以上所述是小编给大家介绍的Vue+Typescript中在Vue上挂载axios使用时报错,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

赞 (0)

相关推荐

  • Vuejs入门教程之Vue生命周期，数据，手动挂载，指令，过滤器

    Vuejs入门教程之Vue生命周期，数据，手动挂载，指令，过滤器

    原教程: http://cn.vuejs.org/guide/instance.html http://cn.vuejs.org/guide/syntax.html 本博文是在原教程的基础上加上实例,并尝试说明的更详细. (十)Vue实例的生命周期 如图:(我自己翻译的中文版,英文版请查看本博文顶部的,第一个链接) (八)传入的数据绑定 先创建一个对象(假如是obj),然后将他传入Vue实例中,作为data属性的值,那么 ①obj的值的变化,将影响Vue实例中的值的变化: ②相反一样: ③可以在

  • 在 Typescript 中使用可被复用的 Vue Mixin功能

    转到用 Typescript 写 Vue 应用以后,经过一轮工具链和依赖的洗礼,总算蹒跚地能走起来了,不过有一个很常用的功能 mixin,似乎还没有官方的解决方案. 既想享受 mixin 的灵活和方便,又想收获 ts 的类型系统带来的安全保障和开发时使用 IntelliSense 的顺滑体验. vuejs 官方组织里有一个 'vue-class-component' 以及连带推荐的 'vue-property-decorator',都没有相应实现.翻了下前者的 issue,有一条挂了好些时间的待

  • 深入理解Vue生命周期、手动挂载及挂载子组件

    深入理解Vue生命周期、手动挂载及挂载子组件

    本文介绍了Vue生命周期和手动挂载,分享给大家,具体如下: 1.vue的生命周期: 2.$mount()手动挂载 当Vue实例没有el属性时,则该实例尚没有挂载到某个dom中: 假如需要延迟挂载,可以在之后手动调用vm.$mount()方法来挂载. 例如: 方法一: <div id="app"> {{name}} </div> <button onclick="test()">挂载</button> <scrip

  • 在Vue组件中使用 TypeScript的方法

    注意:此文并不是把vue改为全部替换为ts,而是可以在原来的项目中植入ts文件,目前只是实践阶段,向ts转化过程中的过渡. ts有什么用? 类型检查.直接编译到原生js.引入新的语法糖 为什么用ts? TypeScript的设计目的应该是解决JavaScript的"痛点":弱类型和没有命名空间,导致很难模块化,不适合开发大型程序.另外它还提供了一些语法糖来帮助大家更方便地实践面向对象的编程. typescript不仅可以约束我们的编码习惯,还能起到注释的作用,当我们看到一函数后我们立马

  • vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)

    vue-cli+axios实现附件上传下载记录: 上传: 这里用formData格式传递参数:请求成功后后台返回上传文件的对应信息. 重点是下载: ############## downloadfile(res) { var blob = new Blob([res.data], {type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=utf-8'}); //applicati

  • vue 挂载路由到头部导航的方法

    vue 挂载路由到头部导航的方法

    路由是写好了,但正确的切换路由方式不应该是我们在地址栏里面输入地址,有追求的方式是点击头部的导航菜单来切换,就像这样 我们点击上面的发现.关注.消息就切换路由导航 我们先把头部的导航写好 打开header.vue 先把vue组件的基本格式写好 然后开始布局写头部 这里很不好意思,我一直以为头部的header.vue是引入了的,实际上并没有........ 打开app,vue重新编写一下 app.vue 代码: <template> <div id="app">

  • Vue2 Vue-cli中使用Typescript的配置详解

    前言 因为最近公司的团队热衷于vue框架,新项目想着练练typescript,于是开始了vue+ts的踩坑之路...本文意在为和我有一样想法的伙伴们省去踩坑的时间,下面话不多说了,来一起看看关于Vue2 Vue-cli中利用Typescript需要的配置是什么吧. 一.初步配置 首先安装官方插件vue-class-component,vue-property-decorator,配置webpack. webpack配置如下: 修改入口文件 entry: { app: './src/main.ts

  • 详解在Vue中使用TypeScript的一些思考(实践)

    Vue.extend or vue-class-component 使用 TypeScript 写 Vue 组件时,有两种推荐形式: Vue.extend():使用基础 Vue 构造器,创建一个"子类".此种写法与 Vue 单文件组件标准形式最为接近,唯一不同仅是组件选项需要被包裹在 Vue.extend() 中. vue-class-component:通常与 vue-property-decorator 一起使用,提供一系列装饰器,能让我们书写类风格的 Vue 组件. 两种形式输出

  • Vue+Typescript中在Vue上挂载axios使用时报错问题

    在vue项目开发过程中,为了方便在各个组件中调用axios,我们通常会在入口文件将axios挂载到vue原型身上,如下: main.ts import Vue from 'vue' import axios from './utils/http' Vue.prototype.$axios = axios; 这样的话,我们在各个组件中进行请求时,就可以直接使用this.$axios,但是在ts中使用this.$axios进行请求时,会进行报错,如下所示: 从图中我们可以看出ts在Vue身上检测不到

  • 初识 Vue.js 中的 *.Vue文件

    初识 Vue.js 中的 *.Vue文件

    什么是Vue.js? vue.js是一套构建用户界面的渐进式框架,它采用自底向上增量开发的设计.(自底向上设计方法是根据系统功能要求,从具体的器件.逻辑部件或者相似系统开始,凭借设计者熟练的技巧和丰富的经验,通过对其进行相互连接.修改和扩大,构成所要求的系统.)Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合.另一方面,当与单文件组件和Vue生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动. 什么是*.vue文件 首先,我们用 vue-cli

  • 如何在Vue 3中扩展Vue Router链接详解

    如何在Vue 3中扩展Vue Router链接详解

    前言 <router-link> 标签是一个很好的工具,可以在你的Vue应用程序的不同页面之间进行导航,但当导航到一个外部链接时,它不是一个工具,为此,你应该使用一个普通的<a> 标签.也许这只是我的问题,但很多时候,我都懒得去理会这其中的差别.其他时候,链接可能是动态的,也就是说,来自数据库或一些用户提供的数据源.在这种情况下,你根本不知道这个链接是外部的还是内部的,而且在每个可能使用这个链接的地方手动做V-if是多么痛苦的事情. 如果只是用一个单一的组件来处理所有的内部和外部链

  • 关于vue文件中index.vue的使用方法

    目录 vue文件中index.vue使用 vue的index.html总结 为啥要有index.html 单页面应用 index.html实战代码汇总 vue文件中index.vue使用 <template> <div> <keep-alive> //组件缓存 <home-page v-if="pageName === 'homePage'"></home-page> </keep-alive> <add-p

  • Vue+TypeScript中处理computed方式

    Vue+TypeScript中处理computed方式

    目录 什么是 「computed」 「computed」 的用途 在TypeScript怎么用 另一种方案 vue computed正确使用方式 computed or methods computed or watch 什么是 「computed」 「computed」 是Vue中提供的一个计算属性.它被混入到Vue实例中,所有的getter和setter的this上下文自动的绑定为Vue实例.计算属性的结果会被缓存,除非依赖的响应式property变化才会从新计算. 「computed」 的

  • Vue项目中new Vue()和export default{}的区别说明

    目录 new Vue()和export default{}区别 new Vue() export default{} import,export和export default注意问题 new Vue()和export default{}区别 在生成.导出.导入.使用 Vue 组件的时候,像我这种新手就会常常被位于不同文件的 new Vue() 和 export default{} 搞得晕头转向.它们含义到底是什么,又有什么异同呢? new Vue() 首先,Vue 是什么? 我看其他博主的理解,

  • vue中多附件上传的实现示例

    vue中多附件上传的实现示例

    前言 本篇主要记录在 Vue项目中 实现附件上传功能,可实现单/多附件上传,识别文件格式并用不同图标展示功能,及控制是否可编辑功能.内容简洁易懂,如有需要可自取. 完整代码点击这里click 核心代码 <div class="upload-flie-btn"> <div class="btn-tips" @click="openFileSelect" v-show="editFlag">上传附件<

  • Vue项目中如何封装axios（统一管理http请求）

    1.需求说明 在使用Vue.js框架开发前端项目时,会经常发送ajax请求服务端接口,在开发过程中,需要对axios进一步封装,方便在项目中的使用. 2.Vue项目结构 在本地创建Vue项目,目录结构如下: - public  静态资源文件  - src  |- assets  静态资源目录  |- components 公共组件目录  |- http   axios封装目录  |- router  路由管理目录  |- store  状态管理目录  |- views  视图组件目录  |- A

  • vue+freemarker中遇到的坑及解决

    目录 vue+freemarker遇到的坑 在这个过程中遇到了几个坑 freemarker的一些坑问题 1.对空对象十分敏感 2.freemarker中的${}与js中的${}冲突 3.渲染数字时出现逗号分隔 4.拼接渲染 5.将对象或数组渲染进js vue+freemarker遇到的坑 java后端开发者做后台管理系统,用模版技术还是挺方便的,但是如果在页面上对数据进行修改,怎么办呢? 可以用jQuery选中各个dom节点的值,然后组装成后台接口中需要的Form,再用ajax请求后台,这种方式

  • Vue项目中CSS Modules和Scoped CSS的介绍与区别

    目录 背景 CSS Modules 原理 规则 :global选择器 Vue3新特性 Scoped CSS 原理 规则 深度作用选择器 Vue3新特性 二者的比较 总结 背景 在前端工程化飞速发展的时候,作为非编程语言的CSS在融入模块化的浪潮时产生了很多问题: 无法做到样式模块化 组件化开发是前端模块化的核心,但是原生CSS的思想是样式的层叠,对于组件来说并不友好,会造成组件样式被覆盖等问题. 于是我们希望样式是存在作用域的,即在组件的作用域内,组件样式只对该组件生效. 命名混乱 在大型项目中

随机推荐