uni-app vue3 传统选项式写法使用pinia会导致鸿蒙软件白屏

uni-app vue3 传统选项式写法使用pinia会导致鸿蒙软件白屏

开发环境 版本号 项目创建方式
Mac 15.6 HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Mac

PC开发环境操作系统版本号：15.6

HBuilderX类型：正式

HBuilderX版本号：4.75

手机系统：HarmonyOS NEXT

手机系统版本号：HarmonyOS 5.0.5

手机厂商：模拟器

手机机型：honemeng

页面类型：vue

vue版本：vue3

打包方式：云端

项目创建方式：HBuilderX

### 示例代码：

```vue
//test.vue
<template>
<view>
<text>123</text>
</view>
</template> 

<!-- 这里去掉setup会在鸿蒙应用白屏 -->
<script setup>
import {
useMainStore
} from "@/stores/main";
const mainStore = useMainStore()
console.log("mainStore-----2", mainStore)
</script> 

<style>
</style> 

//store/main.js 

import { defineStore } from 'pinia'; 

export const useMainStore = defineStore('main', {
state: () => ({
count: 0,
token: '',
version: '',
uniPlatform: '',
}),
actions: {
increment() {
this.count++;
},
},
});

操作步骤：

按照上面代码运行即可

预期结果：

不使用setup 使用传统选项也可以正常运行

实际结果：

白屏

bug描述：

uniapp vue3 传统选项式写法使用pinia会导致鸿蒙软件白屏 而使用<script setup>写法正常


更多关于uni-app vue3 传统选项式写法使用pinia会导致鸿蒙软件白屏的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

你好，请提供一下一个可以复现的项目

更多关于uni-app vue3 传统选项式写法使用pinia会导致鸿蒙软件白屏的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


简单的demo 已经上传在下面评论的附件

模拟器系统是:HarmonyOS 5.1.1

简单的demo 已经上传在附件

请问有解决办法了吗

在 uni-app Vue3 项目中，鸿蒙平台白屏问题通常与 Pinia 的初始化时机和组件生命周期相关。从代码分析，问题可能出现在以下方面：

  1. Pinia Store 初始化时机
    在传统选项式写法中，created 或 beforeCreate 钩子中调用 useMainStore() 可能导致 Store 未正确挂载到应用实例。而 <script setup> 在编译阶段会确保依赖注入，因此能正常执行。

  2. 鸿蒙平台的兼容性差异
    鸿蒙 NEXT 对 Vue3 响应式系统的支持可能存在边界情况。选项式写法中，若 Store 在组件实例化时访问了尚未就绪的响应式数据，可能触发白屏。

建议排查步骤：

  • 检查 main.js 中 Pinia 是否正确安装：
    import { createPinia } from 'pinia'
const pinia = createPinia()
app.use(pinia)
  • 在选项式组件中，将 Store 调用移至 mounted 钩子：
    export default {
  mounted() {
    const mainStore = useMainStore()
    console.log(mainStore)
  }
}
回到顶部