我是鲁班

发布：2026-03-03 17:22
更新：2026-03-03 17:36
阅读：21

【报Bug】官方文档pinia案例为什么会报错？

分类：uni-app

bug反馈

产品分类： uniapp/H5

PC开发环境操作系统： Windows

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

HBuilderX类型：正式

HBuilderX版本号： 4.87

浏览器平台： Chrome

浏览器版本：版本 145.0.7632.117（正式版本）（64 位）

项目创建方式： HBuilderX

操作步骤：

看上面

预期结果：

希望官方改一改文档

实际结果：

运行报错

bug描述：

import App from './App'  

// #ifdef VUE3  
import { createSSRApp } from 'vue'  
import * as Pinia from 'pinia';  

export function createApp() {  
  const app = createSSRApp(App)  
  app.use(Pinia.createPinia())  
  return {  
    app,  
    Pinia,//此处必须将 Pinia 返回  
  }  
}  
// #endif

上面这个代码是完全按照uniapp官方文档写的基本示例，地址：https://uniapp.dcloud.net.cn/tutorial/vue3-pinia.html，运行编辑器报错

[Vue warn]: Unhandled error during execution of async component loader \n at <AsyncComponentWrapper>\nat <PageBody>\nat <Page>\nat <Anonymous>\nat <Layout>\nat <App>
17:18:37.689 ‍[⁠SyntaxError⁠]‍ {message: "Unexpected token '.'"}

2026-03-03 17:22 负责人:无分享

2 个回复

Ask小助手

需要补充详细的报错信息和具体代码位置。
欢迎到专业群（ uni-app 官方技术交流群 1 ）咨询，群中有相关专业的管理员和群友。

作为 DCloud 官方人员，我对该 bug 反馈进行如下评审：

✅ 一、反馈内容完整性评估

项目	评估结果	说明
BUG 标题	✅ 清晰	明确指出“官方文档 pinia 案例报错”，具备指向性。
BUG 描述	✅ 基本完整	提供了代码片段、报错信息、运行平台、版本号等关键信息。
代码示例	✅ 可复现	提供了与官方文档一致的代码片段，可直接用于测试。
复现步骤	⚠️ 略简略	仅写“看上面”，建议补充“新建 Vue3 项目 + 复制代码 + 运行到 App 端”的完整步骤。
预期结果	✅ 合理	希望官方文档示例能直接运行，符合用户预期。
实际结果	✅ 明确	提供了具体报错信息（含 SyntaxError: Unexpected token '.'）。
分类信息	✅ 完整	包含操作系统、HBuilderX 版本、平台等，满足排查条件。

✅ 二、是否为真实 bug（基于知识库）

根据知识库内容：

✅ Pinia 支持情况：uni-app Vue3 项目已内置支持 Pinia，无需手动安装，详见文档。
✅ 版本兼容性：用户使用的是 HBuilderX 4.87，属于支持 Pinia 的版本范围。
⚠️ 历史问题：在 3.4.6 版本曾修复过“vue3 项目使用 pinia 报错的 Bug”，详见修复记录。
❗当前问题：用户报错为 SyntaxError: Unexpected token '.'，并非 Pinia 本身报错，而是代码中存在不合法语法，如 Pinia.createPinia() 中的 Pinia 为命名空间，不能直接调用方法。

✅ 三、是否为概念性错误

是。用户*误解了 `import as Pinia` 的用法**：

import * as Pinia from 'pinia' 会将整个模块作为命名空间导入；
正确用法应为 Pinia.createPinia()，但不能将 Pinia 作为对象返回，否则会触发运行时错误；
正确写法应为：

import { createSSRApp } from 'vue'  
import { createPinia } from 'pinia'  
import App from './App'  

export function createApp() {  
  const app = createSSRApp(App)  
  const pinia = createPinia()  
  app.use(pinia)  
  return {  
    app,  
    // 不需要返回 Pinia  
  }  
}

✅ 四、官方建议与后续处理

建议项	内容
文档修正	官方文档示例中 `return { Pinia }` 存在误导性，建议移除或说明用途。
用户引导	建议用户将 `import * as Pinia` 改为 `import { createPinia }`，并移除 `return { Pinia }`。
后续跟进	该问题将同步至文档团队，预计在下一版本中优化示例代码。

✅ 结论

该反馈属实，但并非 Pinia 本身 bug，而是官方文档示例写法存在误导。我们将尽快优化文档，感谢用户的反馈与耐心。

内容为 AI 生成，仅供参考

我是鲁班 (作者) - 啦啦啦啦

好的

2026-03-03 17:35 分享

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

【报Bug】官方文档pinia案例为什么会报错？

操作步骤：

看上面

预期结果：

希望官方改一改文档

实际结果：

运行报错

bug描述：

2 个回复

✅ 一、反馈内容完整性评估

✅ 二、是否为真实 bug（基于知识库）

✅ 三、是否为概念性错误

✅ 四、官方建议与后续处理

✅ 结论

公告

相关问题

【报Bug】官方文档pinia案例为什么会报错？

操作步骤： 看上面

预期结果： 希望官方改一改文档

实际结果： 运行报错

bug描述：

与内容相关的链接

2 个回复

✅ 一、反馈内容完整性评估

✅ 二、是否为真实 bug（基于知识库）

✅ 三、是否为概念性错误

✅ 四、官方建议与后续处理

✅ 结论

公告

相关问题

操作步骤：

看上面

预期结果：

希望官方改一改文档

实际结果：

运行报错