这篇文章主要介绍了Vue+ts里面this.$store问题怎么解决的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Vue+ts里面this.$store问题怎么解决文章都会有所收获,下面我们一起来看看吧。
vuex里面我调用this.$store访问仓库state时,调用失败报错
(this as any).$store
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
}
我就想这两个区别就是导入了一个类型,突然想到
然后回去一看原本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+ts里面this.$store问题怎么解决”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“Vue+ts里面this.$store问题怎么解决”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注亿速云行业资讯频道。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。