uni-app vue3 初次编译并启动开发工具后 vuex报错 随便修改一行代码触发热更新后就好了

uni-app vue3 初次编译并启动开发工具后 vuex报错 随便修改一行代码触发热更新后就好了

操作步骤:

  • 初次编译并启动开发工具后,vuex报错,随便修改一行代码触发热更新后就好了

预期结果:

  • 不报错

实际结果:

  • 报错

bug描述:

  • vue3 初次编译并启动开发工具后,vuex报错,随便修改一行代码触发热更新后就好了

bug附件

image

download

项目信息
产品分类 uniapp/小程序/微信
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 windows11
HBuilderX类型 正式
HBuilderX版本号 4.76
第三方开发者工具版本号 1.06.2412050
基础库版本号 3.11.0
项目创建方式 HBuilderX

更多关于uni-app vue3 初次编译并启动开发工具后 vuex报错 随便修改一行代码触发热更新后就好了的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

发个可复现demo

更多关于uni-app vue3 初次编译并启动开发工具后 vuex报错 随便修改一行代码触发热更新后就好了的实战教程也可以访问 https://www.itying.com/category-93-b0.html


已上传压缩包附件

要通过HBuilderX编译并唤起开发工具才会报错,如果启动前开发工具开着就没问题

最新的alpha版本的hx未复现此问题

这是一个典型的 Vuex 在 uni-app 中的初始化时序问题。在 Vue3 环境下,当应用初次编译启动时,Vuex store 可能尚未完全初始化就被某些组件提前访问,导致报错。

热更新后恢复正常是因为 store 已经完成初始化,重新渲染时组件能正确获取到 store 实例。

解决方案:

  1. 检查 store 导入顺序
    确保在 main.js 中先导入并安装 Vuex,再创建应用实例:
import { createApp } from 'vue'
import App from './App.vue'
import store from './store'

const app = createApp(App)
app.use(store)
app.mount('#app')
  1. 使用 store 前验证可用性
    在组件中访问 store 前添加检查:
import { useStore } from 'vuex'

export default {
  setup() {
    const store = useStore()
    // 添加条件判断
    if (!store) return
    // 正常使用 store
  }
}
回到顶部