请教 Vue3 的 defineComponent 函数使用

Artiver · 2024-9-19 23:00:37 · 69 次点击
各位好,我又来请教个 Vue3 的问题,标签页系统使用 defineComponent 创建组件,实现刷新功能。由于组件需要缓存,使用了 keepalive ,于是用 pinia 存储组件的 name 属性,所以创建时在 name 加上时间戳将其表示唯一。

[GitHub 地址]( https://github.com/Artifer/vue3-admin-box/blob/keepalive/src/router/createNode.js)

`createNode.js`的部分代码片段如下,本意是想看下创建组件时的时间戳:

```js
function getTimeStamp() {
  let timeNow = Date.now();
  console.log("create: ", timeNow);
  return timeNow;
}

export function createNameComponent(component) {
  return () => {
    return new Promise((resolve) => {
      component().then((comm) => {
        const tempComm = defineComponent({
          name: (comm.default.name || "vueAdminBox") + "_" + getTimeStamp(),
          props: comm.default.props || {},
          ...
```

当前实现效果如下:

![20240919 223831]( https://img.z4a.net/images/2024/09/19/20240919_223831.gif)

可以看到,组件只有第一次打开时会触发`getTimeStamp`函数,关闭再打开就不会重新获取时间戳了。

我期望每次打开标签页都是不同的时间戳,有老哥遇到这个问题吗?
举报· 69 次点击
登录 注册 站外分享
3 条回复  
shakukansp 小成 2024-9-20 02:40:58
稍微看了看,你这 router 的 modules 里面每个路由的 component 只调了一次啊

你要重复调用 createNameComponent ,得用 addRoute 和 remove route 修改记录
jspatrick 小成 2024-9-20 10:55:36
https://i.imgur.com/LKpUJUZ.jpeg
问题应该就是这个了,keep-alive 缓存路由不应该依靠组件的 name ,或许应该用 route 的 path
leokun 小成 2024-9-20 13:03:29
https://github.com/Artifer/vue3-admin-box/blob/keepalive/src/router/modules/service.js#L27
这个代码只调用了一次
返回顶部