smoothly
smoothly
  • 发布:2026-03-27 17:57
  • 更新:2026-03-27 17:58
  • 阅读:11

【报Bug】nvue 使用 vuex 或者 pinia 报错

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: 25H2

HBuilderX类型: 正式

HBuilderX版本号: 5.05

手机系统: Android

手机系统版本号: Android 12

手机厂商: 华为

手机机型: nova 9

页面类型: nvue

vue版本: vue3

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
// store/index.js  

import * as PiniaStore from 'pinia';  

import {  
    ref  
} from 'vue'  

export const pinia = PiniaStore.createPinia();  

export const Pinia = PiniaStore;  

export const useTestStore = PiniaStore.defineStore('test', () => {  

    const count = ref(0)  

    function addCount() {  
        count.value += 1  
    }  

    return {  
        count,  
        addCount  
    }  
})
// pages/index/index.nvue  

<template>  
    <view class="content">  
        <image class="logo" src="/static/logo.png"></image>  
        <view class="text-area">  
            <text class="title">{{title}}</text>  
        </view>  
    </view>  
</template>  

<script setup>  
    import { ref } from 'vue'  

    import { useTestStore } from '@/store'  

    const title = ref('Hello')  

</script>

操作步骤:

详见实例

预期结果:

无错误,正常使用

实际结果:

错误

bug描述:

提示:
17:52:29.210 reportJSException >>>> exception function:createInstanceContext, exception:white screen cause create instanceContext failed,check js stack ->Uncaught TypeError: PiniaStore.createPinia is not a function
at (pages/index/index.js.nvue:76:14)
at (pages/index/index.js.nvue:150:3)

2026-03-27 17:57 负责人:无 分享
已邀请:
Ask小助手

Ask小助手 - Ask社区AI助手

需要补充平台分类: 安卓, ios, 鸿蒙 next; 补充 HBuilderX 版本信息, 辅助示例代码, 详细的报错信息。
欢迎到专业群( uni-app 官方技术交流群 1 ) 咨询,群中有相关专业的管理员和群友。

这个 bug 反馈整体信息较为完整,但经核查,这并非 uni-app 框架本身的缺陷,而是 nvue 页面使用 Pinia 时的配置方式问题

评审分析如下:

1. 反馈内容完整性评估

  • 环境信息完整,包含了 HBuilderX 版本(5.05)、Vue 版本(Vue3)、运行平台(Android)等关键信息
  • 错误日志提供了具体堆栈信息(PiniaStore.createPinia is not a function
  • 代码示例展示了 store 定义和 nvue 页面引用,但缺少关键的 main.js 入口文件配置,这是导致问题无法直接定位的核心缺失

2. 问题性质判定
根据知识库 vue3-pinia 文档 的明确说明:在 uni-app 中使用 Pinia 时,必须在 main.jscreateApp 返回值中显式返回 Pinia,否则在 nvue 页面中无法正确获取 Pinia 实例。

正确的 main.js 配置应为:

import { createSSRApp } from 'vue';  
import App from './App.vue';  
import * as Pinia from 'pinia';  

export function createApp() {  
  const app = createSSRApp(App);  
  app.use(Pinia.createPinia());  
  return {  
    app,  
    Pinia, // 此处必须将 Pinia 返回,nvue 页面才能正常使用  
  };  
}

本助手使用国产模型,生成代码可能不准确。专业的代码生成需要全球顶尖的AI Coding模型。推荐使用uni-agent

用户反馈的代码示例中仅在 store/index.js 中导出了 pinia 实例,但未展示是否在 main.js 中正确返回 Pinia。结合对话知识库中类似案例(reportJSException >>>> exception function:createInstanceContext),此类报错通常由引入写法不规范导致。

3. 补充说明

  • HBuilderX 5.05 版本已内置 Pinia 支持,无需手动安装依赖
  • 若项目之前使用 HBuilderX < 4.14 版本打包,升级到 >= 4.14 后必须整包更新(不可使用 wgt 热更新),否则会出现 Pinia 相关报错
  • nvue 页面与 vue 页面在 Vue3 环境下的运行时环境存在差异,状态管理库的注入方式必须遵循上述返回规范

结论: 该反馈属于使用方式不当,建议补充 main.js 配置后按上述规范调整。知识库中已有明确的 Pinia 使用示例nvue 使用 Vuex 的类似说明(Pinia 同理)可供参考。

内容为 AI 生成,仅供参考

要回复问题请先登录注册