Vue3+TS Day35 - type、typeof、infer、instanceType、路由守卫、本地缓存工具类、vuex设计、跨域问题、父组件如何调用子组件的方法

一、基础知识补充

1、思考在login-account.vue文件中export default defineComponent({}) ，导出的是对象{} ，如果在外部通过ref拿到还是对象{}吗？（这个很重要，但是可能要学完回顾源码的时候才能理解了）

image.png

2、type关键字是JavaScript中的还是TypeScript中的？有什么用？

• 【type】 属于TypeScript中的关键字
• 【作用】给类型起一个新名字，可以作用于原始值(基本类型)，联合类型，元组以及其他任何你需要手写的类型
• 【注意】起别名不会新建一个类型，只是创建了一个新名字来引用那个类型。给基本类别起名字通常没什么用。类型别名常用于联合类型。

type Second = number; // 基本类型
let timeInSecond: number = 10;
let time: Second = 10;  // time的类型其实就是number类型
type userOjb = {name:string} // 对象
type getName = ()=>string  // 函数
type data = [number,string] // 元组
type numOrFun = Second | getName  // 联合类型

3、typeof 呢？

• 【typeof】是JavaScript中的操作符
• 【typeof操作符】返回一个字符串，表示操作数的类型。
• 它的返回值可能是 "string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function" 其中一种

4、理解TypeScript中的 extends 条件类型？

• 【注意】extends 运用在type 和class中时，完全是两种作用效果。
• 【extends】是条件类型是一种条件表达式进行类型的关系检测。

const num: number = 1; // 可被分配
const str: string = 2; // 不可被分配

• 而条件类型的判断逻辑，和上面的的 ”可被分配“ 相同逻辑：

type A = 'x';
type B = 'x' | 'y';

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

• 参考文章： https://juejin.cn/post/6844904066485583885

5、TypeScript中的infer关键字呢？

• 【类型推导 infer】是作为 extends 条件类型的自语句使用，使用 infer 声明一个类型变量，在条件类型判定为 true 时生效。

type ExtractArrayItemType = T extends (infer U)[] ? U : T;

// 条件判断都为 false，返回 T
type T1 = ExtractArrayItemType;         // string
type T2 = ExtractArrayItemType<() => number>;   // () => number
type T4 = ExtractArrayItemType<{ a: string }>;  // { a: string }

// 条件判断为 true，返回 U
type T3 = ExtractArrayItemType;     // Date

• 参考文章： https://juejin.cn/post/6844904067420913678

6、理解instanceType？在vue目前主要用在哪里？

• 【vue中的instanceType用法】父组件用ref获取子组件时，通过 instanceType获取子组件的类型
• 【instanceType作用】该类型的作用是获取构造函数类型的实例类型。

// 源码实现：
// node_modules/typescript/lib/lib.es5.d.ts

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


// 复制代码看一下官方的例子：
class C {
    x = 0;
    y = 0;
}

type T20 = InstanceType;  // C
type T21 = InstanceType;  // any
type T22 = InstanceType;  // any
type T23 = InstanceType;  // Error
type T24 = InstanceType;  // Error

二、项目代码注意点

1、如果在开发环境，网络请求出现了跨域访问怎么办？

• 可以通过本地代理绕过跨域问题

// 在 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、如果在生产环境，网络请求出现了跨域访问怎么办？

• 可以通过Nginx来解决

3、父组件如何调用子组件的方法？

• 通过给子组件添加ref调用，然后借助>保证代码安全

    const accountRef = ref>()

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

4、vuex的内容是存储在内存中的，浏览器一刷新，vuex的数据就被清空了，怎么办？

• 写一个 actions，【loadLocalLogin】在页面初始化的时候调用一下
• 尽量保证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、未登录用户默认跳转到登陆页面要怎么做？

• 使用路由守卫

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被调用了${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()