欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

解決Vue+ts里面this.$store問題

 更新時間：2022年03月30日 14:15:18   作者：Vip_wk  
這篇文章主要介紹了解決Vue+ts里面this.$store問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

Vue+ts里this.$store問題

vuex里面我調(diào)用this.$store訪問倉庫state時，調(diào)用失敗報錯

解決辦法

(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函數(shù)，這樣就有提示了
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()
? }
}

擴展屬性報錯

我們現(xiàn)在代碼里寫一段window,然后用編輯器跳轉(zhuǎn)到其.d.ts文件中去

// 定義一個全局變量 window 類型為Window
declare var window: Window;
// 截取Window接口
interface Window

由于這個接口為全局接口，所以我們可以聲明一個同名全局全局接口，TS會幫我們合并

interface Window {
? // 也可以添加?
? // 字符串簽名 可以允許添加未知名稱屬性
? [p: string]: any
}
// 這樣就可以使用如下代碼不報錯
import axios from 'axios'
window.axios = axios

然后我們發(fā)現(xiàn)

window.axios //這里沒有屬性提示

然后我想把這個axios具體類型掛載上去,當然一想，像下面這樣做

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

然后發(fā)現(xiàn)報錯了，window上沒有axios這個屬性，就很疑惑，嘗試改回去，仍然報錯

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

我就想這兩個區(qū)別就是導入了一個類型，突然想到

TS中沒有import和export的TS文件變量被視為全局

然后回去一看原本W(wǎng)indow的定義

// 注意lib.dom.d.ts這里沒有export
interface Window

好的，想通了，就是因為使用import導入了一個類型，導致我自定義Window接口變成了模塊內(nèi)的，這時候的解決方案當然是看看內(nèi)置語法有沒有能顯示定義全局性的變量

// 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 //這里有屬性提示

總結(jié)：需要擴展一個第三方聲明文件，需要確定其命名空間以及擴展變量實現(xiàn)的接口結(jié)構(gòu)，然后復制該接口寫一次自己的類型即可

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關文章

最新評論