文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2023-06-29 18:11

关注

这篇文章主要介绍了Vue+ts里面this.$store问题怎么解决的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇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 类型为Windowdeclare 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这里没有exportinterface 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+ts里面this.$store问题怎么解决”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“Vue+ts里面this.$store问题怎么解决”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯