木灵鱼儿

木灵鱼儿

阅读：1278

最后更新：2022/09/16/ 20:03:57

使用vue2.7的一些踩坑事项

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、useRouter

import { 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上有的，可以自己在这补上，但是需要注意，虽然补了但是有的推断有些问题，不会有对应的代码提示，有点蛋疼，应该是官方ts的声明不是太好，由于我全部用的setup语法，所以这个其实也用不到。

利用插件实现一个传送门Teleport

插件地址：portal-vue

贴一下我的用法：

创建一个插件ts文件：_PortalVue.ts_

import Vue from "vue";
import PortalVue from "portal-vue";

Vue.use(PortalVue, {
  portalName: "Teleport", //传送门
  portalTargetName: "TeleportTarget", //传送门目标
});

然后再main.ts中激活使用

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
//插件
import "./plugins/PortalVue";

Vue.config.productionTip = false;

new  Vue({
 router,
 store,
 render: (h) =>  h(App),
});
文章分类 vue 项目实战
文章标签 vuevuexvue-routereslintTeleport传送门2.7useRouteuseRouterpinia
木灵鱼儿

木灵鱼儿

发布了 706 篇文章获得点赞 0获得阅读 1278

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可，禁止转载。

one
two
three

关于作者

站点职位 博主
获得点赞 0
文章被阅读 1278

相关文章

封装uni.request api为类似axios的用法封装uni.request api为类似axios的用法
卷轴地图卷轴地图
尾调用优化尾调用优化
性能测试性能测试
生成器 Generator生成器 Generator