来吧，解锁Vue3全家桶+TS的正确姿势

最新推荐文章于 2024-05-17 15:36:58 发布

2401_84433769

最新推荐文章于 2024-05-17 15:36:58 发布

阅读量889

点赞数 23

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/2401_84433769/article/details/138247804

版权

本文介绍了如何在Vue项目中为路由添加隐藏属性，并在TypeScript中处理类型安全。涉及vuex状态管理、setupscript的使用、以及axios的扩展配置，同时提到了JavaScript和ES6的学习资源。

摘要由CSDN通过智能技术生成

扩展路由额外属性

在实际项目开发中，常常会遇到这么一个场景，某一个路由是不需要渲染到侧边栏导航上的，此时我们可以给该路由添加一个hidden属性来实现。

在ts的强类型约束下，添加额外属性就会报错，那么我们就需要扩展RouteRecordRaw类型。

// 联合类型
type RouteConfig = RouteRecordRaw & {hidden?: boolean}; //hidden 是可选属性
const routes: Array<RouteConfig> = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    hidden: true,
    meta: {
      permission: true,
      icon: ''
    }
  }
];

在setup中使用

需要导入useRouter创建一个router实例。

<script lang="ts">
import { useRouter } from 'vue-router';
import { defineComponent } from 'vue';
export default defineComponent({
  setup () {
    const router = useRouter();
    goRoute(path) {
       router.push({path})
    }
  }
})
</script>

vuex

使用this.$store

import { createStore } from 'vuex';
export type State = {
  count: number
}

export default createStore({
  state: {
    count: 0
  }
});

需要创建一个声明文件vuex.d.ts

// vuex.d.ts
import {ComponentCustomProperties} from 'vue';
import {Store} from 'vuex';
import {State} from './store'
declare module '@vue/runtime-core' {
    interface ComponentCustomProperties {
        $store: Store<State>
    }
}

在setup中使用

定义InjecktionKey

2. ```
在安装插件时传入key

在使用useStore时传入

import { InjectionKey } from ‘vue’;
import { createStore, Store } from ‘vuex’;

export type State = {
count: number
}
// 创建一个injectionKey
export const key: InjectionKey<Store> = Symbol(‘key’);

// main.ts
import store, { key } from ‘./store’;
app.use(store, key);


#### 模块


新增一个`todo`模块。导入的模块，需要是一个`vuex`中的interface `Module`的对象,接收两个泛型约束，第一个是**该模块类型**，第二个是**根模块类型**。

// modules/todo.ts
import { Module } from ‘vuex’;
import { State } from ‘…/index.ts’;

type Todo = {
  id: number,
  name: string,
  completed: boolean
}

const initialState = {
todos: [] as Todo[]
};

export type TodoState = typeof initialState;

export default {
  namespaced: true,
  state: initialState,
  mutations: {
    addTodo (state, payload: Todo) {
      state.todos.push(payload);
    }
  }
} as Module<TodoState, State>; //Module<S, R> S 该模块类型 R根模块类型

// index.ts
export type State = {
count: number,
todo?: TodoState // 这里必须是可选，不然state会报错
}

export default createStore({
  state: {
    count: 0
  }
  modules: {
    todo
  }
});


使用：

setup () {
console.log(store.state.todo?.todos);
}


### elementPlus

yarn add element-plus


#### 完整引入

import { createApp } from ‘vue’
import ElementPlus from ‘element-plus’;import ‘element-plus/lib/theme-chalk/index.css’;import App from ‘./App.vue’;
import ‘dayjs/locale/zh-cn’
import locale from ‘element-plus/lib/locale/lang/zh-cn’
const app = createApp(App)
app.use(ElementPlus, { size: ‘small’, zIndex: 3000, locale })
app.mount(‘#app’)


#### 按需加载


需要安装`babel-plugin-component`插件:

yarn add babel-plugin-component -D

// babel.config.js
plugins: [
    [收起
      ‘component’,
      {
        libraryName: ‘element-plus’,
        styleLibraryName: ‘theme-chalk’
      }
    ]
]

import ‘element-plus/lib/theme-chalk/index.css’;
import ‘dayjs/locale/zh-cn’;
import locale from ‘element-plus/lib/locale’;
import lang from ‘element-plus/lib/locale/lang/zh-cn’;
import {
  ElAside,
  ElButton,
  ElButtonGroup,
} from ‘element-plus’;

const components: any[] = [
  ElAside,
  ElButton,
  ElButtonGroup,
];

const plugins:any[] = [
  ElLoading,
  ElMessage,
  ElMessageBox,
  ElNotification
];

const element = (app: any):any => {
  // 国际化
  locale.use(lang);
  // 全局配置
  app.config.globalProperties.$ELEMENT = { size: ‘small’ };

  components.forEach(component => {
    app.component(component.name, component);
  });

plugins.forEach(plugin => {
app.use(plugin);
});
};

export default element;

// main.ts
import element from ‘./plugin/elemment’

const app = createApp(App);
element(app);


### axios


axios的安装使用和vue2上没有什么大的区别，如果需要做一些扩展属性，还是需要声明一个新的类型。

type Config = AxiosRequestConfig & {successNotice? : boolean, errorNotice? : boolean}

import axios, { AxiosResponse, AxiosRequestConfig } from ‘axios’;
import { ElMessage } from ‘element-plus’;
const instance = axios.create({
  baseURL: process.env.VUE_APP_API_BASE_URL || ‘’,
  timeout: 120 * 1000,
  withCredentials: true
});

// 错误处理
const err = (error) => {
  if (error.message.includes(‘timeout’)) {
    ElMessage({
      message: ‘请求超时，请刷新网页重试’,
      type: ‘error’
    });
  }
  if (error.response) {
    const data = error.response.data;
    if (error.response.status === 403) {
      ElMessage({
        message: ‘Forbidden’,
        type: ‘error’
      });
    }
    if (error.response.status === 401) {
      ElMessage({
        message: ‘Unauthorized’,
        type: ‘error’
      });
    }
  }
  return Promise.reject(error);
};

type Config = AxiosRequestConfig & {successNotice? : boolean, errorNotice? : boolean}

// 请求拦截
instance.interceptors.request.use((config: Config) => {
config.headers[‘Access-Token’] = localStorage.getItem(‘token’) || ‘’;
return config;
}, err);

// 响应拦截
instance.interceptors.response.use((response: AxiosResponse) => {
const config: Config = response.config;

export default instance;


### setup script


官方提供了一个**实验性**的写法，直接在`script`里面写`setup`的内容，即：`setup script`。


之前我们写组件是这样的：

export default defineComponent({
  components: {
    ImgReview,
  },
  setup() {
    const count = ref(0);
    return { count };
  }
});


启用`setup script`后：在`script`上加上`setup`

```

是不是看起来简洁了很多，组件直接导入就行了，不用注册组件，数据定义了就可以用。其实我们可以简单的理解为script包括的内容就是setup中的，并做了return。

导出方法

<script lang="ts" setup>
const handleClick = (type: string) => {
  console.log(type);
}


### JavaScript 和 ES6



在这个过程你会发现，有很多 JS 知识点你并不能更好的理解为什么这么设计，以及这样设计的好处是什么，这就逼着让你去学习这单个知识点的来龙去脉，去哪学？第一，书籍，我知道你不喜欢看，我最近通过刷大厂面试题整理了一份前端核心知识笔记，比较书籍更精简，一句废话都没有，这份笔记也让我通过跳槽从8k涨成20k。

![JavaScript部分截图](https://img-blog.csdnimg.cn/img_convert/cac778dc45492a41e2f3e7cd6b0134e5.png)

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**