小小的小明
小小的小明
  • 发布:2025-12-05 10:41
  • 更新:2025-12-05 10:42
  • 阅读:14

【报Bug】CLI 运行APP首屏是 nvue时,引入 pinia插件时报错

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Mac

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

手机系统: Android

手机系统版本号: Android 12

手机厂商: 华为

手机机型: urovo

页面类型: nvue

vue版本: vue3

打包方式: 云端

项目创建方式: CLI

CLI版本号: 3.0.0-alpha-4080720251125001

示例代码:

// # 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 class="box">  
            <input v-model="username" class="box-input" type="text" placeholder="账号">  
        </view>  
        <view class="box">  
            <input v-model="password" class="box-input" type="text" placeholder="密码">  
        </view>  
        <text class="login-btn" @click="login">登录</text>  

    </view>  
</template>  

<script lang="ts" setup>  
import { ref, computed } from 'vue'  
import { onLoad } from "@dcloudio/uni-app";  

import type { User } from '@/types/index';  

import { useAuthStore } from '@/store/auth';  

const authStore = useAuthStore();  

const title = ref('Hello');  
const username = ref(''); // 登录账号  
const password = ref('');  // 登录密码  

onLoad(() => {  
    let loginInfo = authStore.userInfo as User;  
    if (loginInfo?.account && loginInfo?.pwd) {  
        username.value = loginInfo.account;  
        password.value = loginInfo.pwd;  
    }  

    let hasLogin = !!uni.getStorageSync('hasLogin');  
    uni.removeStorageSync('hasLogin');  
    // #ifdef H5  
    hasLogin = true;  
    // #endif  

})  

// 登录  
const login = () => {  
    authStore.login(username.value, password.value)  
}  

</script>  

<style scoped>  
.content {  
    display: flex;  
    flex-direction: column;  
    align-items: center;  
    justify-content: center;  
}  

.logo {  
    height: 200rpx;  
    width: 200rpx;  
    margin: 200rpx 0 20rpx;  
}  

.text-area {  
    line-height: 40rpx;  
    text-align: center;  
    justify-content: center;  
    padding: 4rpx 40rpx 20rpx;  
    margin-bottom: 20rpx;  
}  

.title {  
    font-size: 36rpx;  
    color: #8f8f94;  
}  

.box {  
    background: #f1f2f3;  
    margin: 12rpx;  
    width: 450rpx;  
}  

.box-input {  
    flex: 1;  
    padding: 12rpx 18rpx;  
    border-radius: 8rpx;  
    height: 76rpx;  
    font-size: 32rpx;  
}  

</style>

// # auth.ts

import { defineStore } from 'pinia';  
import type { User } from '../types';  

interface AuthState {  
  token: string | null;  
  userInfo: User | null;  
  isLoading: boolean;  
}  

// 登录状态管理  
export const useAuthStore = defineStore('auth', {  
  state: (): AuthState => {  
    const token = uni.getStorageSync('token');  

    const userInfo = token ? uni.getStorageSync('userinfo') : {} as User;  

    return {  
      token,  
      userInfo,  
      isLoading: false  
    };  
  },  

  actions: {  
    async login(account: string, password: string) {  
      this.isLoading = true;  

      try {  
        const res = { token: '123456', user: {} as User  }  

        this.token = data.data.token;  
        this.userInfo = data.data.user;  

        uni.reLaunch({ url: '/pages/home/home' })  
      } catch (error) {  
        console.error(`登录失败:${error}`);  
        uni.showToast({  
          icon: 'none',  
          title: '登录失败'  
        })  
      } finally {  
        this.isLoading = false;  
      }  
    }  
  }  
});

操作步骤:

定义一个首屏index.nvue 引入 pinia注入模块 auth.ts ,调用即可

预期结果:

能够正常的使用

实际结果:

reportJSException >>>> exception function:createInstanceContext, exception:white screen cause create instanceContext failed,check js stack ->Uncaught TypeError: (0 , import_pinia.defineStore) is not a function
at (pages/index/index.js.nvue:849:51)
at (pages/index/index.js.nvue:1329:3)

bug描述:

CLI 运行APP首屏是 nvue时,引入 pinia插件模块时报错

2025-12-05 10:41 负责人:无 分享
已邀请:
Ask小助手

Ask小助手 - Ask社区AI助手

根据问题描述和知识库内容,您的问题是由于在nvue页面中直接引入Pinia导致的。nvue页面基于Weex引擎,对某些Vue生态插件的支持有限。

关键原因:

  1. 知识库明确指出:"nvue 暂不支持在 main.js 注册全局组件" 和 "uni-app x 暂不支持 i18n、vuex、pinia等插件"
  2. 虽然uni-app内置了Pinia,但主要针对Vue页面优化,nvue页面存在兼容性问题
  3. 错误信息 (0 , import_pinia.defineStore) is not a function 表明Pinia未被正确加载

解决方案:

  1. 升级HBuilderX:确保使用最新正式版(至少4.71+),知识库中4.71.2025061206-alpha修复了App平台 修复 vue3 cli 项目 nvue 页面可能编译失败的Bug

  2. 架构调整建议

    • 将首屏改为Vue页面(非nvue),Pinia在Vue页面中能正常工作
    • 若必须使用nvue首屏,建议在Vue页面中管理状态,通过uni-app通信机制与nvue页面交互
  3. 替代方案

    • 使用uni-app的globalData进行简单状态管理
    • 通过自定义事件总线实现跨页面通信
  4. 注意事项

    • CLI项目需在main.js中正确初始化Pinia:app.use(createPinia())
    • 不要在nvue页面中直接import Pinia store

参考文档:Pinia状态管理nvue注意事项

内容为 AI 生成,仅供参考

要回复问题请先登录注册