解决Vue+ts里面this.$store问题

 更新时间:2022年03月30日 14:15:18   作者:Vip_wk  
这篇文章主要介绍了解决Vue+ts里面this.$store问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

Vue+ts里this.$store问题

vuex里面我调用this.$store访问仓库state时,调用失败报错

解决办法

(this as any).$store 

Vue实践ts中的一些常见错误

mixin报错

import { Component, Prop, Vue ,Mixins} from 'vue-property-decorator'
import httpminix from '../mixin/httpMixin'
@Component({
  mixins:[httpminix]
})
export default class HelloWorld extends Vue {
  public async getUser() : Promise<void> {
    const r = await this.apiGet('/show') //HelloWorld上没有apiGet方法
    this.firstName = JSON.stringify(r.data)
  }
}

解决方案

import { Component, Prop, Vue ,Mixins} from 'vue-property-decorator'
import httpminix from '../mixin/httpMixin'
@Component
// 这里从继承Vue改成继承Minix函数,这样就有提示了
export default class HelloWorld extends Mixins(httpminix) {
  public async getUser() : Promise<void> {
    const r = await this.apiGet('/show')
    this.firstName = JSON.stringify(r.data)
  }
  public mounted() {
   this.getUser()
  }
}

扩展属性报错

我们现在代码里写一段window,然后用编辑器跳转到其.d.ts文件中去

// 定义一个全局变量 window 类型为Window
declare var window: Window;
// 截取Window接口
interface Window

由于这个接口为全局接口,所以我们可以声明一个同名全局全局接口,TS会帮我们合并

interface Window {
  // 也可以添加 
  // 字符串签名 可以允许添加未知名称属性
  [p: string]: any
}
// 这样就可以使用如下代码不报错
import axios from 'axios'
window.axios = axios

然后我们发现

window.axios //这里没有属性提示

然后我想把这个axios具体类型挂载上去,当然一想,像下面这样做

import {AxiosStatic} from 'axios'
interface Window {
  axios: AxiosStatic
}

然后发现报错了,window上没有axios这个属性,就很疑惑,尝试改回去,仍然报错

import {AxiosStatic} from 'axios'
interface Window {
  [p: string]: any
}

我就想这两个区别就是导入了一个类型,突然想到

TS中没有import和export的TS文件变量被视为全局

然后回去一看原本Window的定义

// 注意lib.dom.d.ts这里没有export
interface Window

好的,想通了,就是因为使用import导入了一个类型,导致我自定义Window接口变成了模块内的,这时候的解决方案当然是看看内置语法有没有能显示定义全局性的变量

// bingo  此时window.axios有提示啦
import { AxiosStatic } from "axios";
declare global {
  interface Window {
      axios: AxiosStatic
  }
}
export { };

TS为我们在模块定义全局提供了一个方式,用于解决在模块中扩展全局

declare global {
  // your type code
}

扩展Vue属性例子

import Vue from 'vue'
declare module "vue/types/vue" {
  interface Vue {
    $message: string;
  }
}

在组件类中可以这样访问

this.$messgae //这里有属性提示

总结:需要扩展一个第三方声明文件,需要确定其命名空间以及扩展变量实现的接口结构,然后复制该接口写一次自己的类型即可

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • @vue/cli4.x版本的vue.config.js常用配置方式

    @vue/cli4.x版本的vue.config.js常用配置方式

    这篇文章主要介绍了@vue/cli4.x版本的vue.config.js常用配置方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05
  • 基于vue实现页面滚动加载的示例详解

    基于vue实现页面滚动加载的示例详解

    页面内容太多会导致加载速度过慢,这时可考虑使用滚动加载即还没有出现在可视范围内的内容块先不加载,出现后再加载,所以本文给大家介绍了基于vue实现页面滚动加载的示例,需要的朋友可以参考下
    2024-01-01
  • Vue使用iframe实现浏览器打印兼容性优化

    Vue使用iframe实现浏览器打印兼容性优化

    在前端开发中,打印功能是一个常见的需求,但不同浏览器对打印样式的支持差异较大,本文我们来看看Vue如何使用iframe实现浏览器打印兼容性优化吧
    2025-04-04
  • 详谈Object.defineProperty 及实现数据双向绑定

    详谈Object.defineProperty 及实现数据双向绑定

    这篇文章主要介绍了详谈Object.defineProperty 及实现数据双向绑定,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • vue刷新页面后params参数丢失的原因和解决方法

    vue刷新页面后params参数丢失的原因和解决方法

    这篇文章主要给大家介绍了vue刷新页面后params参数丢失的原因和解决方法,文中通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2023-12-12
  • 解决axios:"timeout of 5000ms exceeded"超时的问题

    解决axios:"timeout of 5000ms exceeded"

    这篇文章主要介绍了解决axios:"timeout of 5000ms exceeded"超时的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • van-dialog 组件调用报错的解决

    van-dialog 组件调用报错的解决

    这篇文章主要介绍了van-dialog 组件调用报错的解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05
  • Vue3+elementPlus中 树形控件封装的实现

    Vue3+elementPlus中 树形控件封装的实现

    本文主要介绍了Vue3+elementPlus中 树形控件封装的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2025-04-04
  • Vue ElementUi同时校验多个表单(巧用new promise)

    Vue ElementUi同时校验多个表单(巧用new promise)

    这篇文章主要介绍了巧用new promise实现Vue ElementUi同时校验多个表单功能,实现的方法有很多种,本文给大家带来的是一种比较完美的方案,需要的朋友可以参考下
    2018-06-06
  • vue中created、watch和computed的执行顺序详解

    vue中created、watch和computed的执行顺序详解

    由于vue的双向数据绑定,自动更新数据的机制,在数据变化后,对此数据依赖 的所有数据,watch事件都会被更新、触发,下面这篇文章主要给大家介绍了关于vue中created、watch和computed的执行顺序,需要的朋友可以参考下
    2022-11-11

最新评论