uni-app 在vue3中微信小程序使用vuex进行数据缓存时报错导致程序运行不了

uni-app 在vue3中微信小程序使用vuex进行数据缓存时报错导致程序运行不了

示例代码：

// #ifndef VUE3  
import Vue from 'vue'  
import Vuex from 'vuex'  
Vue.use(Vuex)  
const store = new Vuex.Store({  
// #endif  
// #ifdef VUE3  
import { createStore } from 'vuex'  
const store = createStore({  
// #endif  
    state: {  
        test:"测试数据"  
    },  
    mutations: {  
        test(state, provider) {  
            uni.setStorageSync('TEST_CONFIG', '测试数据');  
        }  
    },  
    getters: {  

    },  
    actions: {  

    }  
})  

export default store

操作步骤：

  • 直接运行

预期结果：

  • 在vuex中正常使用数据缓存相关api

实际结果：

  • 使用报错导致程序运行不起来

bug描述：

在vuex中使用数据缓存相关api时报错app.js错误:TypeError: Cannot read property ‘getSystemInfoSync’ of undefined ，导致程序运行不了。

附件

image

test-vue3.zip

相关链接：

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

更多关于uni-app 在vue3中微信小程序使用vuex进行数据缓存时报错导致程序运行不了的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

该帖中的 demo 在 hbx 3.2.10 alpha 下无法编译，报文件查找失败：’@vue/shared’

更多关于uni-app 在vue3中微信小程序使用vuex进行数据缓存时报错导致程序运行不了的实战教程也可以访问 https://www.itying.com/category-93-b0.html


依赖缺失问题参考这里：https://ask.dcloud.net.cn/question/132368
getSystemInfoSync 报错问题将会排查

好的

微信小程序 vue3 中使用 hbx 3.2.10 alpha 版本添加依赖文件后getSystemInfoSync 报错问题已经没有出现了，但是出现了新的报错。

在 Vue 3 的 uni-app 项目中，使用 Vuex 时出现 getSystemInfoSync 错误，通常是因为 Vuex 的 store 在初始化时过早执行了 uni-app 的 API 调用。在微信小程序中，uni-app 的 API 依赖于小程序环境初始化完成，而 Vuex store 可能在应用生命周期之前就被创建，导致 API 调用失败。

解决方案：

  1. 避免在 store 初始化时调用 uni-app API：将 uni.setStorageSync 等 API 调用移至 mutations、actions 或组件生命周期中，确保执行时小程序环境已准备就绪。修改示例代码：
    mutations: {
  test(state, provider) {
    // 确保在需要时再调用 uni API
    if (typeof uni !== 'undefined') {
      uni.setStorageSync('TEST_CONFIG', '测试数据');
    }
  }
}
回到顶部