uniapp引用pinia,app端白屏报错:reportJSException >>>> exception function:createInstanceContext...

这篇具有很好参考价值的文章主要介绍了uniapp引用pinia,app端白屏报错:reportJSException >>>> exception function:createInstanceContext...。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、场景
uniapp引用pinia,app端进入应用白屏。

reportJSException >>>> exception function:createInstanceContext,
exception:white screen cause create instanceContext failed,check js
stack -> /at useStore (app-service.js:2309:15)

二、分析
问题出现的原因就是store实例环境还没加载。
代码层面问题出现的位置在store.js文件里,通过$subscribe实现持久化这块。

三、解决
加上定时器,延时2s再让它持久化

四、扩展文章来源地址https://www.toymoban.com/news/detail-540759.html

import {
	defineStore
} from 'pinia';

export const useUserStore = defineStore({
	id: "user",
	// 使用defineStore方法定义store
	state() {
		// state表示这个store里的状态,也就是存放数据的地方
		return {
			userInfo: {
				username: null,
				avatar: null
			}
		}
	},
	actions: {}
})
// 通过$subscribe实现持久化,
setTimeout(() => {
	const instance = useUserStore();
	instance.$subscribe((mutation, state) => {
		uni.setStorageSync(instance.$id, JSON.stringify(state))
	});
	const val = uni.getStorageSync(instance.$id);
	if (val) {
		instance.$state = JSON.parse(val);
	}
}, 2000)

到了这里,关于uniapp引用pinia,app端白屏报错:reportJSException >>>> exception function:createInstanceContext...的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【UniApp】-uni-app-pinia存储数据

    经过上个章节的介绍,大家可以了解到 uni-app-数据缓存 的基本使用方法 那本章节来给大家介绍一下 uni-app-pinia存储数据 的基本使用方法 经过我这么多篇章的介绍,我发现大家环境比较耗时,所以在今后的文章中,我会尽量减少环境的搭建 如果某一篇的文章环境确实是不一样

    2024年02月04日
    浏览(28)
  • uni-app+vue3+ts+pinia报错【“hasInjectionContext“ is not exported by “node_modules/.store/pinia@2.1.7/n】

    【完整报错】\\\"hasInjectionContext\\\" is not exported by \\\"node_modules/.store/pinia@2.1.7/node_modules/vue-demi/lib/index.mjs\\\", imported by \\\"node_modules/.store/pinia@2.1.7/node_modules/pinia/dist/pinia.mjs\\\". 【报错原因】版本不匹配 查看package.json下pinia和vue版本 【版本参考界面】https://github.com/vuejs/pinia/blob/v2/packages/pini

    2024年04月11日
    浏览(44)
  • 记录一下:uniapp小程序分包后引用组件报错问题

     具体遇到的场景是这样的,我当前文件是在主包中,但是引入的这几个组件是在分包下面,于是就造成了引入错误,我曾尝试者用绝对跟相对路径引入缺仍然报错 最终看到一个贴记录的是: 小程序分包后,主包应该是不能引用分包的任何资源,分包可以引用主包的任何资源

    2024年02月15日
    浏览(40)
  • uniapp打包白屏问题

    【bug】:浏览器运行正常,模拟器、真机运行只有tab栏显示,或者完全白屏。打包也是白屏。 【控制台报错信息】: 注意:app不支持dom操作 【解决办法】:在main.js里修改 render函数是vue通过js渲染dom结构的函数createElement,app不支持dom操作,所以在这里设置一下就好了。

    2024年02月12日
    浏览(32)
  • 微信小程序uniapp出现白屏怎么解决(总集)

    我本人遇到这种问题一般都很快解决了,所以没有怎么留意,没有凡尔赛自夸,不是自己厉害,只是比较细心。最近有小伙伴反馈白屏,突然想到这种情况有很多种,想做个集合,有朋友遇到解决不了的,请留言,我尽可能解决并留在此处。 最重要的!!! 如果你的电脑配

    2024年01月19日
    浏览(48)
  • 启动uniapp小程序报错:Error:app.json:在项目根目录中未找到app.json

    如图所示:将代码从仓库中拉下来在开发者工具中直接启动后报错 这个时候就直接 更换根目录文件为mp-weixin再次重新打开微信开发者工具 即可,注意 编译运行的是mp-weixin 。 如图 需注意:如若想更改代码需要在最外层项目代码中进行更改,不要直接在mp-weixin更改,因为这个

    2024年02月08日
    浏览(44)
  • uniapp h5 发行后 微信第二次打开网址 页面白屏

    发行后把网址给客户,第一次可以正常登录打开,第二次打开白屏 原因:第一次打开时没有token,所以跳转登录页,可以正常访问 第二次打开时有token,但是网址根目录没有配置默认页面,所以白屏 解决方法:改为如下

    2024年01月18日
    浏览(26)
  • 如何在 uniapp 里面使用 pinia 数据持久化 (pinia-plugin-persistedstate)

    想要在 uniapp 里面使用 pinia-plugin-persistedstate 会遇到的问题就是 uniapp里面没有浏览器里面的 sessionStorage localStorage 这些 api 。 我们只需要替换掉 pinia-plugin-persistedstate 默认的储存 api 就可以了。使用 createPersistedState 重新创建一个实例, 把里面的 storage 的参数修改为对应的 uniapp

    2024年02月08日
    浏览(30)
  • uni-app中使用pinia

    目录 Pinia 是什么? uni-app 使用Pinia main.js 中引用pinia 创建和注册模块 定义pinia方式 选项options方式 定义pinia 页面中使用 pinia选项options方式 函数方式 定义pinia 页面中使用 函数方式 定义的pinia Pinia(发音为  /piːnjʌ/ ,如英语中的  peenya ) 是 Vue 的存储库,它允许您跨组件

    2024年02月13日
    浏览(28)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包