解决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 //这里有属性提示

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

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

相关文章

  • vue3:vue2中protoType更改为config.globalProperties问题

    vue3:vue2中protoType更改为config.globalProperties问题

    这篇文章主要介绍了vue3:vue2中protoType更改为config.globalProperties问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • nuxt 实现在其它js文件中使用store的方式

    nuxt 实现在其它js文件中使用store的方式

    这篇文章主要介绍了nuxt 实现在其它js文件中使用store的方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • Vue封装通用table组件的完整步骤记录

    Vue封装通用table组件的完整步骤记录

    对于一个中后台类的项目,一个比较常见的展示形式就是Table了,这篇文章主要给大家介绍了关于Vue封装通用table组件的相关资料,需要的朋友可以参考下
    2021-07-07
  • vue+animation实现翻页动画

    vue+animation实现翻页动画

    这篇文章主要为大家详细介绍了vue+animation实现翻页动画,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-06-06
  • Vue和React中快速使用Electron的简单教程

    Vue和React中快速使用Electron的简单教程

    Electron也可以快速地将你的网站打包成一个原生应用发布,下面这篇文章主要给大家介绍了关于Vue和React中快速使用Electron的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-05-05
  • Vue3中虚拟dom转成真实dom的过程详解

    Vue3中虚拟dom转成真实dom的过程详解

    Vue.js 在其运行过程中会将模板编译成虚拟 DOM (VNode),然后再将 VNode 渲染成实际的 DOM 节点,这个过程是由 Vue 内部的编译器和渲染系统完成的,本文给大家介绍了Vue3中虚拟dom转成真实dom的过程,需要的朋友可以参考下
    2024-09-09
  • vue3封装放大镜组件的实例代码

    vue3封装放大镜组件的实例代码

    这篇文章主要给大家介绍了关于vue3封装放大镜组件的相关资料,封装之后,使用起来就更简单了,一个组件一行就可以,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2021-09-09
  • vue开发自定义的全局公共组件详解

    vue开发自定义的全局公共组件详解

    本文介绍了如何开发自定义全局公共组件的两种方法,第一种方法是通过在components文件夹中创建新的组件文件夹,例如Loading文件夹,并在其中创建index.js和index.vue文件,通过在vue的入口文件main.js中进行引入,可以实现组件的全局调用
    2024-10-10
  • vue如何自定义封装API组件

    vue如何自定义封装API组件

    这篇文章主要介绍了vue如何自定义封装API组件,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03
  • 解决vue-router 切换tab标签关闭时缓存问题

    解决vue-router 切换tab标签关闭时缓存问题

    这篇文章主要介绍了解决vue-router 切换tab标签关闭时缓存问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07

最新评论