Vue3+TS Day35 - type、typeof稳捆、infer酝掩、instanceType、路由守衛(wèi)眷柔、本地緩存工具類、vuex設(shè)計原朝、跨域問題驯嘱、父組件如何調(diào)用子組件的方法

一、基礎(chǔ)知識補充

1喳坠、思考在login-account.vue文件中export default defineComponent({}) 鞠评,導(dǎo)出的是對象{} ,如果在外部通過ref拿到還是對象{}嗎壕鹉?(這個很重要剃幌,但是可能要學(xué)完回顧源碼的時候才能理解了)

image.png

2、type關(guān)鍵字是JavaScript中的還是TypeScript中的晾浴?有什么用负乡?

  • 【type】 屬于TypeScript中的關(guān)鍵字
  • 【作用】給類型起一個新名字,可以作用于原始值(基本類型)脊凰,聯(lián)合類型抖棘,元組以及其他任何你需要手寫的類型
  • 【注意】起別名不會新建一個類型,只是創(chuàng)建了一個新名字來引用那個類型狸涌。給基本類別起名字通常沒什么用切省。類型別名常用于聯(lián)合類型。
type Second = number; // 基本類型
let timeInSecond: number = 10;
let time: Second = 10;  // time的類型其實就是number類型
type userOjb = {name:string} // 對象
type getName = ()=>string  // 函數(shù)
type data = [number,string] // 元組
type numOrFun = Second | getName  // 聯(lián)合類型

3帕胆、typeof 呢朝捆?

  • 【typeof】是JavaScript中的操作符
  • 【typeof操作符】返回一個字符串,表示操作數(shù)的類型懒豹。
  • 它的返回值可能是 "string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function" 其中一種

4芙盘、理解TypeScript中的 extends 條件類型驯用?

  • 【注意】extends 運用在type 和class中時,完全是兩種作用效果何陆。
  • 【extends】是條件類型是一種條件表達式進行類型的關(guān)系檢測晨汹。
const num: number = 1; // 可被分配
const str: string = 2; // 不可被分配
  • 而條件類型的判斷邏輯,和上面的的 ”可被分配“ 相同邏輯:
type A = 'x';
type B = 'x' | 'y';

type Y = A extends B ? true : false; // true

5贷盲、TypeScript中的infer關(guān)鍵字呢淘这?

  • 【類型推導(dǎo) infer】是作為 extends 條件類型的自語句使用,使用 infer 聲明一個類型變量巩剖,在條件類型判定為 true 時生效铝穷。
type ExtractArrayItemType<T> = T extends (infer U)[] ? U : T;

// 條件判斷都為 false,返回 T
type T1 = ExtractArrayItemType<string>;         // string
type T2 = ExtractArrayItemType<() => number>;   // () => number
type T4 = ExtractArrayItemType<{ a: string }>;  // { a: string }

// 條件判斷為 true佳魔,返回 U
type T3 = ExtractArrayItemType<Date[]>;     // Date

6曙聂、理解instanceType?在vue目前主要用在哪里鞠鲜?

  • 【vue中的instanceType用法】父組件用ref獲取子組件時宁脊,通過 instanceType獲取子組件的類型
  • 【instanceType作用】該類型的作用是獲取構(gòu)造函數(shù)類型的實例類型。
// 源碼實現(xiàn):
// node_modules/typescript/lib/lib.es5.d.ts

type InstanceType<T extends new (...args: any[]) => any> = T extends new (...args: any[]) => infer R ? R : any;


// 復(fù)制代碼看一下官方的例子:
class C {
    x = 0;
    y = 0;
}

type T20 = InstanceType<typeof C>;  // C
type T21 = InstanceType<any>;  // any
type T22 = InstanceType<never>;  // any
type T23 = InstanceType<string>;  // Error
type T24 = InstanceType<Function>;  // Error

二贤姆、項目代碼注意點

1榆苞、如果在開發(fā)環(huán)境,網(wǎng)絡(luò)請求出現(xiàn)了跨域訪問怎么辦霞捡?

  • 可以通過本地代理繞過跨域問題
// 在 vue.config.js 文件中配置devServer
module.exports = {
  // 1.配置方式一: CLI提供的屬性
  outputDir: './build',
  // publicPath: './',
  devServer: {
    proxy: {
      '^/api': {
        target: 'http://152.136.185.210:5000',
        pathRewrite: {
          '^/api': ''
        },
        changeOrigin: true
      }
    }
  },
  // 2.配置方式二: 和webpack屬性完全一致, 最后會進行合并
  configureWebpack: {
    resolve: {
      alias: {
        components: '@/components'
      }
    }
  }
}

2坐漏、如果在生產(chǎn)環(huán)境,網(wǎng)絡(luò)請求出現(xiàn)了跨域訪問怎么辦碧信?

  • 可以通過Nginx來解決

3赊琳、父組件如何調(diào)用子組件的方法?

  • 通過給子組件添加ref調(diào)用砰碴,然后借助<InstanceType<typeof LoginAccount>>保證代碼安全
    const accountRef = ref<InstanceType<typeof LoginAccount>>()

    const handleLoginClick = () => {
      accountRef.value?.loginAction(isKeepPassword.value)
    }

4躏筏、vuex的內(nèi)容是存儲在內(nèi)存中的,瀏覽器一刷新衣式,vuex的數(shù)據(jù)就被清空了寸士,怎么辦?

  • 寫一個 actions碴卧,【loadLocalLogin】在頁面初始化的時候調(diào)用一下
  • 盡量保證vuex中state的所有修改都源自mutation流程
// store/login/index.ts
loadLocalLogin({ commit }) {
      const token = localCache.getCache('token')
      if (token) {
        commit('changeToken', token)
      }
      const userInfo = localCache.getCache('userInfo')
      if (userInfo) {
        commit('changeUserInfo', userInfo)
      }
      const userMenus = localCache.getCache('userMenus')
      if (userMenus) {
        commit('changeUserMenus', userMenus)
      }
    }
// store/index.ts
export function setupStore() {
  store.dispatch('login/loadLocalLogin')
}
// main.ts
import store from './store'
import { setupStore } from './store'

const app = createApp(App)
setupStore()
app.mount('#app')

5弱卡、未登錄用戶默認跳轉(zhuǎn)到登陸頁面要怎么做?

  • 使用路由守衛(wèi)
import { createRouter, createWebHistory } from 'vue-router'
import { RouteRecordRaw } from 'vue-router'
import localCache from '@/utils/cache'

const routes: RouteRecordRaw[] = [
  {
    path: '/',
    redirect: 'main'
  },
  {
    path: '/login',
    component: () => import('../views/login/login.vue')
  },
  {
    path: '/main',
    component: () => import('../views/main/main.vue')
  }
]

const router = createRouter({
  routes,
  history: createWebHistory()
})

router.beforeEach((to) => {
  if (to.path !== '/login') {
    const token = localCache.getCache('token')
    if (!token) {
      return '/login'
    }
  }
})

export default router

6住册、如何寫一個本地緩存管理util婶博?

// cache.ts

let counter = 0
class LocalCache {
  constructor() {
    console.log(`LocalCache被調(diào)用了${counter++}次`)
  }

  setCache(key: string, value: any) {
    window.localStorage.setItem(key, JSON.stringify(value))
  }

  getCache(key: string) {
    let value = window.localStorage.getItem(key) ?? ''
    if (value) {
      value = JSON.parse(value)
    }
    return value
  }

  deleteCache(key: string) {
    window.localStorage.removeItem(key)
  }

  clearCache() {
    window.localStorage.clear()
  }
}

export default new LocalCache()

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市荧飞,隨后出現(xiàn)的幾起案子凡人,更是在濱河造成了極大的恐慌名党,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,590評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件挠轴,死亡現(xiàn)場離奇詭異传睹,居然都是意外死亡,警方通過查閱死者的電腦和手機岸晦,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,157評論 3 399
  • 文/潘曉璐 我一進店門欧啤,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人启上,你說我怎么就攤上這事邢隧。” “怎么了冈在?”我有些...
    開封第一講書人閱讀 169,301評論 0 362
  • 文/不壞的土叔 我叫張陵倒慧,是天一觀的道長。 經(jīng)常有香客問我包券,道長纫谅,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,078評論 1 300
  • 正文 為了忘掉前任溅固,我火速辦了婚禮系宜,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘发魄。我一直安慰自己,他們只是感情好俩垃,可當我...
    茶點故事閱讀 69,082評論 6 398
  • 文/花漫 我一把揭開白布励幼。 她就那樣靜靜地躺著,像睡著了一般口柳。 火紅的嫁衣襯著肌膚如雪苹粟。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,682評論 1 312
  • 那天跃闹,我揣著相機與錄音嵌削,去河邊找鬼。 笑死望艺,一個胖子當著我的面吹牛苛秕,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播找默,決...
    沈念sama閱讀 41,155評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼艇劫,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了惩激?” 一聲冷哼從身側(cè)響起店煞,我...
    開封第一講書人閱讀 40,098評論 0 277
  • 序言:老撾萬榮一對情侶失蹤蟹演,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后顷蟀,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體酒请,經(jīng)...
    沈念sama閱讀 46,638評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,701評論 3 342
  • 正文 我和宋清朗相戀三年鸣个,在試婚紗的時候發(fā)現(xiàn)自己被綠了羞反。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,852評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡毛萌,死狀恐怖苟弛,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情阁将,我是刑警寧澤膏秫,帶...
    沈念sama閱讀 36,520評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站做盅,受9級特大地震影響缤削,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜吹榴,卻給世界環(huán)境...
    茶點故事閱讀 42,181評論 3 335
  • 文/蒙蒙 一亭敢、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧图筹,春花似錦帅刀、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,674評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至瓜晤,卻和暖如春锥余,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背痢掠。 一陣腳步聲響...
    開封第一講書人閱讀 33,788評論 1 274
  • 我被黑心中介騙來泰國打工驱犹, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人足画。 一個月前我還...
    沈念sama閱讀 49,279評論 3 379
  • 正文 我出身青樓雄驹,卻偏偏與公主長得像,于是被迫代替她去往敵國和親淹辞。 傳聞我的和親對象是個殘疾皇子荠医,可洞房花燭夜當晚...
    茶點故事閱讀 45,851評論 2 361

推薦閱讀更多精彩內(nèi)容