uni-app vue3项目真机调试时 js中store状态响应式丢失 h5正常

操作步骤：

真机运行附件项目，登陆后点开监控页面，会发起请求

预期结果：

能够正确获取store中状态，请求数据正常

实际结果：

store中状态没有改变，取值失败为undefined, 导致请求参数缺失请求失败

bug描述：

今天升级hbuilderX后，项目真机调试运行发现，封装请求的js文件中，通过 import store from "@/store/index.js" 引用vuex的方式，store的状态不再响应式。其他vue页面store状态正常是响应式的。但是编译成h5运行又都是正常的，代码在附件里，项目比较粗糙，只需查看登录后的状态改变和监控页面的请求和请求参数即可

信息类别	信息内容
产品分类	uniapp/App
PC开发环境操作系统	Windows
PC开发环境操作系统版本号	Windows 10 专业版 21H1
HBuilderX类型	正式
HBuilderX版本号	3.4.6
手机系统	Android
手机系统版本号	Android 11
手机厂商	小米
手机机型	MI 9
页面类型	vue
vue版本	vue3
打包方式	云端
项目创建方式	HBuilderX

附件

test.zip

nodeper 1楼•1 个月前作者

调整如下：

在 index.nvue 中 useStore() 的获取方式调整为 getApp().$store
在 http.js 中 store.state 调整为 getApp().$store.state

即： vue3 环境下，在 nvue 页面或可能被引入到 nvue 页面的 js 中，使用 getApp().$store 获取 vuex 的全局 store

eggper 2楼•1 个月前

好的，感谢

yibo5220 3楼•1 个月前

在 uni-app 中使用 Vue 3 进行开发时，如果在真机调试时发现 store 状态响应式丢失，而在 H5 环境下正常，可能是由于以下几个原因导致的。以下是一些可能的解决方案和排查步骤：

1. 检查 Vuex 或 Pinia 的版本兼容性

确保你使用的 Vuex 或 Pinia 版本与 Vue 3 兼容。
如果你使用的是 Vuex，建议升级到 Vuex 4.x，因为它是专门为 Vue 3 设计的。
如果你使用的是 Pinia，确保它是最新版本。

2. 检查 store 的初始化

确保 store 在 main.js 或 main.ts 中正确初始化，并且挂载到了 Vue 实例上。

例如，使用 Vuex 时：

import { createApp } from 'vue'
import App from './App.vue'
import store from './store'

const app = createApp(App)
app.use(store)
app.mount('#app')

3. 检查真机调试环境

真机调试时，确保你的设备与开发环境连接正常，并且调试工具（如 Chrome DevTools 或 Safari Web Inspector）能够正确捕获到 Vue 的状态。
有时，真机调试时可能会出现网络问题或缓存问题，导致状态无法正确同步。可以尝试清除缓存或重新连接设备。

4. 检查异步操作

如果你在 store 中使用了异步操作（如 axios 请求），确保这些操作在真机环境下能够正常执行。
可以在异步操作中添加日志，检查是否在真机环境下成功执行。

5. 检查响应式数据的定义

确保你在 store 中定义的响应式数据是使用 Vue 3 的 reactive 或 ref 等 API 进行定义的。

例如，使用 Pinia 时：

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
  }),
  actions: {
    increment() {
      this.count++
    },
  },
})

uni-app vue3项目 真机调试时 js中store状态响应式丢失 h5正常