1***@qq.com

发布：2022-10-18 10:14
更新：2023-09-22 10:38
阅读：1851

【报Bug】vue3+pinia+uniapp在app端白屏

分类：uni-app

bug反馈

产品分类： uniapp/App

PC开发环境操作系统： Windows

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

HBuilderX类型：正式

HBuilderX版本号： 3.6.4

手机系统： Android

手机系统版本号： Android 12

手机厂商：小米

手机机型：小米10

页面类型： vue

vue版本： vue3

打包方式：云端

项目创建方式： HBuilderX

示例代码：

store/login.js 商店代码

import {  
    defineStore  
} from 'pinia';  
import Cache from '@/utils/cache';  
import {  
    reactive, toRefs  
} from 'vue';  

export const useCounterStore = defineStore('loginPinia', {  
    state: () => {  
        return {  
            isLogin: false,  
            token: Cache.get('TOKEN') || null  
        };  
    },  
    actions: {  
        LOGIN(opt){  
            this.token =opt.token  
            Cache.set('TOKEN', opt.token);  
            Cache.set('USER_INFO', opt);  
        }  
    },  
});

js 端读取

import {  
    useCounterStore  
} from '@/store/login';  
const loginPinia = new useCounterStore();

main.js 代码

import App from './App'  
import * as Pinia from 'pinia';  

// 引入全局uview-plus  
import uviewPlus from './uni_modules/uview-plus/index.js'  

// #ifdef VUE3  
import { createSSRApp } from 'vue'  
export function createApp() {  
  const app = createSSRApp(App)  
  app.use(Pinia.createPinia());  

  app.use(uviewPlus)  
  return {  
    app,  
    Pinia  
  }  
}  
// #endif

操作步骤：

复现步骤在代码示例日哦面

预期结果：

app使用pinia 正常

实际结果：

app使用pinia 白屏

bug描述：

使用pinia ,在vue文件中使用没问题，在js 中使用，H5端正常，app 白屏报错，
关键代码如下，main.js,按照文档正常配置的

2022-10-18 10:14 负责人:无分享

7 个回复

1***@qq.com

解决了吗，我也遇到了这个问题，

2***@qq.com

解决了吗？

2023-07-28 16:35
1***@qq.com

回复 2***@qq.com: 解决了，就是useCounterStore()这个函数调用不能放在setup外面，简单来说就是调用太早了，注意就行

2023-09-08 15:33

5***@qq.com

同样的问题解决了方法：
import pinia from '@/store/index.js'

吧pinia带入 useXXXpinia）：
const userStore = useUser(pinia)

7***@qq.com

我也遇到同样的问题请问怎么解决

2023-05-29 10:08

w***@sina.com

同样的问题

2***@qq.com

解决了吗

2023-07-28 16:36
h***@163.com

回复 2***@qq.com: https://github.com/dcloudio/uni-app/issues/3853 试试

2023-07-31 15:28

刘哲学

解决了吗？同样的问题

[已删除]

const loginPinia = new useCounterStore();
尝试把这段话放在生命周期里面

h***@163.com

同样问题。。

kernelX

解决了，各位，不要再js页面顶部引入，例如你之前如果是这样引入的

import { useStore } from '@/store/app';  
const { setxxx } = useStore();

那么你只需要在页面顶部引入就行

import { useStore } from '@/store/app';

然后调用方法就在函数内部调用

export const xxxx = () => {  
 const { setxxx } = useStore();  
//你的相关逻辑  
}

要回复问题请先登录或注册

【报Bug】vue3+pinia+uniapp在app端白屏

store/login.js 商店代码

js 端读取

main.js 代码

操作步骤：

复现步骤在代码示例日哦面

预期结果：

app使用pinia 正常

实际结果：

app使用pinia 白屏

bug描述：

7 个回复

公告

相关问题

【报Bug】vue3+pinia+uniapp在app端白屏

store/login.js 商店代码

js 端读取

main.js 代码

操作步骤： 复现步骤在代码示例日哦面

预期结果： app使用pinia 正常

实际结果： app使用pinia 白屏

bug描述：

与内容相关的链接

7 个回复

公告

相关问题

操作步骤：

复现步骤在代码示例日哦面

预期结果：

app使用pinia 正常

实际结果：

app使用pinia 白屏