鸿蒙 uni-app uni.setStorage VUE3存储数据的时候无法存储响应式对象的value

鸿蒙 uni-app uni.setStorage VUE3存储数据的时候无法存储响应式对象的value

开发环境 版本号 项目创建方式
Windows win11 HBuilderX

操作步骤：

  • 真机运行就行了

预期结果：

  • 可以正常存储响应式对象的value

实际结果：

  • 无法存储响应式对象的value

bug描述：

<script setup>  
let historyList = ref([])  
let uniqueArr = [1]  
historyList.value = uniqueArr  

uni.setStorage({  
    key: 'expressQueryList',  
    data: historyList.value,  
    success: function () {  
        console.log('success');  
        uni.getStorage({  
            key: 'expressQueryList',  
            success:(SSS)=>{  
                console.log(SSS)  
            }  
        })  
    },  
    fail(err) {  
        console.log(err)  
    }  
});  
console.log(uni.getStorageSync('expressQueryList'))  
</script>
  • history.value 无法存储,uniqueArr可以存储

更多关于鸿蒙 uni-app uni.setStorage VUE3存储数据的时候无法存储响应式对象的value的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

更新到 4.74 alpha 可以解决这个问题

更多关于鸿蒙 uni-app uni.setStorage VUE3存储数据的时候无法存储响应式对象的value的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


ok，这个正式版预计什么时候可以更新啊

回复 阵浊秀: 得过一段时间吧

在Vue 3中，ref创建的响应式变量需要通过.value访问其实际值，但直接存储historyList.value到uni.setStorage可能因数据序列化问题导致存储失败。uni.setStorage内部使用JSON.stringify序列化数据，而响应式代理对象可能包含不可序列化的属性。

建议在存储前将响应式数据转换为普通JavaScript对象。使用JSON.parse(JSON.stringify(historyList.value))或Vue的toRaw方法（需从’vue’导入）去除响应式特性：

import { toRaw } from 'vue';

uni.setStorage({
    key: 'expressQueryList',
    data: toRaw(historyList.value), // 或 JSON.parse(JSON.stringify(historyList.value))
    success: function() {
        console.log('success');
    }
});

同时，uni.getStorageSync在setStorage异步操作完成前调用会返回空值，应将同步调用移至success回调内确保数据已写入。示例：

uni.setStorage({
    key: 'expressQueryList',
    data: toRaw(historyList.value),
    success: function() {
        console.log(uni.getStorageSync('expressQueryList')); // 正确获取数据
    }
});
回到顶部