useInit hooks不完善，无法高效的管理生命周期和页面传参

Minf97 commented 9 months ago

在作者给出的test示例中，对于 useInit 是这样使用的： onLoad(() => { const { pageName, pagePath, pageQuery } = useInit(); console.log(pageName, pagePath, pageQuery, 'pageName,pagePath, pageQuery'); }); 此时存在问题：解构出来的变量只允许在 onLoad 作用域中使用，无法提供给 template 使用。我尝试过将 onLoad 生命周期也放入 useInit 进行管理，但出现了很奇怪的bug，最后失败了。

有没有更好的解决方案呢？我希望解构出来的变量可以在 setup 下作为全局变量使用，而不是只能在 onLoad 中使用的局部变量

Allen-1998 commented 9 months ago

在setup下 const pageInfo = ref({}), 然后在 onload 里 pageInfo.value = useInit();
在你需要用到的时候再从 useInit 里解构

这个问题本质上是js作用域相关，可以去补充了解一下相关知识

Minf97 commented 9 months ago

我确实也是这样做的，但这样的做法让我觉得似乎是"多此一举"。

hooks是为了复用逻辑而存在，那么我为什么不把 onLoad 和页面传参也放入hooks里进行管理呢？否则每个页面都需要写这一段重复的代码。

另外补充一下问题描述： useInit 只能在onLoad中使用，如果在setup下直接使用将报错。

TypeError: Cannot read property 'fullPath' of undefined
    at Object.useInit (useInit.js? [sm]:13)
    at setup (year.js:8)
    at callWithErrorHandling (vendor.js? [sm]:2843)
    at setupStatefulComponent (vendor.js? [sm]:4977)
    at setupComponent (vendor.js? [sm]:4941)
    at mountComponent (vendor.js? [sm]:5481)
    at createComponent3 (vendor.js? [sm]:5703)
    at $createComponent (vendor.js? [sm]:6691)
    at pi.attached (vendor.js? [sm]:6783)
    at o.safeCallback (WASubContext.js?t=wechat&s=1696819033492&v=3.1.2:1)(env: Windows,mp,1.06.2307260; lib: 3.1.2

定位问题：页面栈.$page 获取失败，拿到是undefined。在onLoad中调用不会出现该问题，猜测是页面在经过onLoad后才会挂载到页面栈里，但钩子触发时间在onLoad之前

我会继续跟进这个问题，希望得到一个vue3管理生命周期的最佳实践

ttk-cli / uni-vue3-vite-ts-pinia

useInit hooks不完善，无法高效的管理生命周期和页面传参 #44