uni-app unicloud-db修改数据后返回数据未更新

uni-app unicloud-db修改数据后返回数据未更新

操作步骤：

<template>  
    <view>  
        <unicloud-db ref="dbRef" v-slot:default="{data, loading, error, options}" collection="connect">  
            <view v-if="error">{{error.message}}</view>  
            <view v-else>  
                <uni-list>  
                    <uni-list-item v-for="item in data" :key="item._id"  
                        :title="item.name"  
                        :note="item.tel"   
                        showArrow  
                        clickable  
                        @click.native="toNext('/pages/test/update?item='+JSON.stringify(item))">  
                    </uni-list-item>  
                </uni-list>  
            </view>  
        </unicloud-db>  
    </view>  
</template>  

<script setup>  
import {ref} from "vue"  
import {onShow} from "@dcloudio/uni-app"  

const dbRef = ref();  

onShow(() => {  
    dbRef.value?.refresh();  
})  

const toNext = (url) => {  
    uni.navigateTo({  
        url  
    })  
}  

</script>  

<style>  
</style>

预期结果：

这种列表页跳修改页面后，在返回列表页时，应该是onShow更新列表，无感刷新。


# 实际结果：


单独使用 unicloud-db 修改后不会更新数据。使用onShow配合dbRef.value?.refresh();又会清空页面，造成闪动。

bug描述：

unicloud-db修改数据后，返回数据未更新。

列表页面使用：unicloud-db显示列表。从列表页面进入修改页面，然后修改了内容后。返回列表页面，数据没有更新。

列表页面。

<unicloud-db ref="dbRef" v-slot:default="{data, loading, error, options}" collection="connect">  
    <view v-if="error">{{error.message}}</view>  
    <view v-else>  
        <uni-list>  
            <uni-list-item v-for="item in data" :key="item._id"  
                :title="item.name"  
                :note="item.tel"   
                showArrow  
                clickable  
                @click.native="toNext('/pages/test/update?item='+JSON.stringify(item))">  
            </uni-list-item>  
        </uni-list>  
    </view>  
</unicloud-db>

修改页面。

<template>  
    <view>  
        <uni-easyinput  v-model="_d.form.name" placeholder="姓名" />  
        <uni-easyinput  v-model="_d.form.tel" placeholder="电话" />  
        <button @click="handleUpdate">修改</button>  
    </view>  
</template>  

<script setup>  
import {reactive} from "vue";  
import {onLoad} from "@dcloudio/uni-app"  

const _d = reactive({  
    form: {_id: '',name: '',tel: '',}  
})  
onLoad(options => {  
    _d.form = JSON.parse(options.item);  
})  
const handleUpdate = () => {  
    const db = uniCloud.database();  
    let params = {..._d.form};  
    delete params._id  
    db.collection('connect').doc(_d.form._id).update(params).then(res => {  
        if(res.result.errCode == 0) {  
            uni.navigateBack()  
        }  
    })  
}  
</script>

如果在列表页面执行，dbRef.value?.refresh();可以刷新数据，但是，页面会闪烁，因为它会清空历史数据后，在获取新数据。所以也不得行。

这种列表页跳修改页面后，在返回列表页时，应该是onShow更新列表，无感刷新。不是这种清空后刷新。


![Image](https://www.itying.com/uniimg.php?url=https://img-cdn-tc.dcloud.net.cn/uploads/questions/20251111/31eb4d0a51c34bf21dc4a712c06a14dd.png)
![Image](https://www.itying.com/uniimg.php?url=https://img-cdn-tc.dcloud.net.cn/uploads/questions/20251111/6970cb8a87dcfca6ade4c9d684a773ee.png)
![Image](https://www.itying.com/uniimg.php?url=https://img-cdn-tc.dcloud.net.cn/uploads/questions/20251111/21e9c890206192b267a1c303cf3ed9d0.png)
![Image](https://www.itying.com/uniimg.php?url=https://img-cdn-tc.dcloud.net.cn/uploads/questions/20251111/ef260e93a1a8e2ae8cdcc8c5c94cbad5.png)
![Image](https://www.itying.com/uniimg.php?url=https://img-cdn-tc.dcloud.net.cn/uploads/questions/20251111/4e1d66431dc8be3bd77939681337f35b.png)

更多关于uni-app unicloud-db修改数据后返回数据未更新的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

修改数据成功后，通过事件告诉列表页，手动添加一条数据进去。

更多关于uni-app unicloud-db修改数据后返回数据未更新的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这样局限性太大了。子页面修改一点数据，都要改这个列表页面。当子页面的子页面的子页面，这些都要修改数据的时候，代码就太麻烦了，而且可维护性太差了

这是 uni-app 中 unicloud-db 组件的一个常见问题。问题在于 unicloud-db 组件默认会缓存数据，在页面返回时不会自动重新请求最新数据。

目前有几种解决方案：

  1. 使用 loadtime 参数：
<unicloud-db ref="dbRef" loadtime="always" v-slot:default="{data, loading, error, options}" collection="connect">

设置 loadtime="always" 可以让组件在每次显示时都重新加载数据。

  1. 优化 refresh 方法： 在 onShow 中调用 refresh 时，可以添加 loading 状态处理，避免页面闪烁：
onShow(() => {
    if(dbRef.value) {
        dbRef.value.loadData({
            clear: true // 明确清除旧数据
        }, () => {
            // 数据加载完成回调
        })
    }
})
  1. 使用 uniCloud 事件机制： 在修改页面更新成功后，发送全局事件：
// 修改页面
db.collection('connect').doc(_d.form._id).update(params).then(res => {
    if(res.result.errCode == 0) {
        uni.$emit('dataUpdated') // 发送更新事件
        uni.navigateBack()
    }
})

// 列表页面
onShow(() => {
    uni.$on('dataUpdated', () => {
        dbRef.value?.refresh()
    })
})
回到顶部