uni-app项目跑APP报useStore报错

前情

uni-app是我比较喜欢的跨平台框架，它能开发小程序/H5/APP(安卓/iOS)，重要的是对前端开发友好，自带的IDE让开发体验也挺棒的，现公司项目就是主推uni-app，最近手上项目就是要跑快手/抖音/微信/支付宝/APP多端的项目
坑位

最近负责的项目是使用Vue3+uview-plus+Pinia技术栈的项目，在跑小程序端的时候一切都算顺利，最近同事准备跑APP端的时候发现，控制台报如下错，我自己尝试跑了一下也报同样错

1. reportJSException >>>> exception function:createInstanceContext, exception:white screen cause create instanceContext failed,check js stack
2. at useStore (app-service.js:2211:15)
3. at (app-service. js:7552:20)
4. at (app-service. js:57237:3)

复制代码

why?

因为我以前有项目是有遇到这到过这种错误情况，就是使用Pinia的store的时候初始化的时机有问题
为什么小程序端没有问题，而APP端有问题，应该是小程序渲染进程和JS进程是二个独立进程，框架层做了额外的异步处理，掩盖了这个问题，而APP是使用原生 WebView（iOS/WKWebView 或 Android/Chrome），相当于是普通的浏览器渲染，此时就暴露出问题了
解决方案

在使用Pinia的store的时候，注意初始化时机，特别是在js文件中使用，可以把初始化状态放到函数中，不要在js文件顶层做初始化状态

1. //  错误的示例
3. import { globalStore } from '@/store/global'
5. const globalInstance = globalStore()
6. export function test() {
7.   // 使用globalInstance
8. }
10. // 正确的示例
12. import { globalStore } from '@/store/global'
14. export function test() {
15.     const globalInstance = globalStore()
16.   // 使用globalInstance
17. }

复制代码

在组件中使用，一般像Vue3项目都是使用 setup语法糖的，一般不会有问题，如果你是使用选项式的写组件，那就要避免在组件顶层做状态文件初始化了，可以放到组件生命周期钩子里做初始化

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！