木灵鱼儿 - 2.7
type: channel
link: https://www.mulingyuer.com/tag/2-7/
items: 使用vue2.7的一些踩坑事项

使用vue2.7的一些踩坑事项
type: item
date: 2022-09-16T20:03:57+08:00
description: eslint校验的一些问题（暂时无解）在初始化项目时勾选了eslint校验之后，升级vue 2.7版本后，eslint-plugin-vue这个插件需要升级到9+版本，我目前使用的版本是："eslint-plugin-vue": "^9.4.0"具体的一些可以参考官方提供的2.7升级指南：2.7日志官方居然把这个写在了变更日志里面，按道理最好官方的文档上也有一份说明的，但是目前没有。虽然eslint的依赖更新到新版后确实解决了一些项目启动报错的问题，但是有时候我们的SFC单文件组件开发的时候，template中的一些变量绑定还是会出现波浪线警告，这个目前找不到办法解决，只能等后续更新修复了（配合ts的时候出现了）。还有就是如果配合了ts使用，ts的类型声明在export导出的时候，vscode中已经不报错了，但是终端上还是会提示没有这个变量导出，明明已经导出了，而且文件也保存了，解决办法就只能重新启动一下server服务，让项目重新运行一下。useRoute和useRouter这个问题我相信很多人都会遇到，虽然我们的vue升级后支持setup的写法，但是路由还是"vue-router": "^3.6.4" 3x的版本，这个版本并没有像4版本那样，可以直接从vue-router插件中导出useRoute和useRouter方法。但是在setup中是没有this对象的，甚至也没有像之前的@vue/composition-api那样，在setup的第二个参数中有root属性，我们获取路由实例可以从root中获取。虽然我们可以在路由中这么写：import Vue from "vue"; import VueRouter from "vue-router"; import routes from "./routes"; Vue.use(VueRouter); const router = new VueRouter({ mode: "hash", base: process.env.BASE_URL, routes, }); /** 模拟router hooks */ export function useRouter() { return router; } export default router;但是我们并不能很好的获取当前路由对象，甚至对当前路由的属性进行监听变化。找了好久，在官方的一个issues中找到了一个很不错的办法：issues他的意思是我们可以通过这种方式引入useRoute、useRouterimport { useRoute, useRouter } from "vue-router/dist/composables"需要注意的是这种方式只能在setup中使用，如果你想在一个js或者ts文件中获取路由，你可能还得使用上面模拟router hooks的方式。pinia和vuex的选择直接放弃pinia，官方虽然在文档中有vue2使用的方法，但是完全不行，照着文档写连项目都无法启动，造势倒是挺大的，这点确实很遗憾的，本来是想无损过渡vue3的写法，显然没有这个机会了。vuex在使用ts后，类型的推断可以参考之前的文章，用法完全一样。但是那个useStore官方也没有提供，我们也得自己手动模拟一个。import Vue from "vue"; import Vuex from "vuex"; import type { Store } from "vuex"; Vue.use(Vuex); export type RootState = { }; const store: Store<RootState> = new Vuex.Store({ state: {}, mutations: {}, actions: {}, modules: { } }); export default store; /** 模拟useStore */ export function useStore(): Store<RootState> { return store; }vue的this上的属性声明在src上声明一个.d.ts文件，内容如下：import type { Store } from "vuex"; import type { RootState } from "./store"; import VueRouter from "vue-router"; declare module "vue" { interface ComponentCustomProperties { $store: Store<RootState>; $router: VueRouter; } }有啥属性在this上有的，可以自己在这补上，但是需要注意，…