请问大家，小程序开发过程中，一般修改或删除数据时候，大家是怎么更新页面的？

Question

                    customer_addr_del({
                        addr_id:id
                    }).then(res=>{
                        console.log(res,'res22')
                        this.$u.toast(res.data.msg)
                        const pages = getCurrentPages()
                        const curPage = pages[pages.length - 1]
                        curPage.onLoad(curPage.options)
                        curPage.onShow()
                        curPage.onReady()
                    })

我是用了这种刷新页面的方式，请问有更好的方式吗？

Answer 1

一般来说 列表页面 我会在请求完 修改/删除 接口之后重新触发一下获取列表数据的方法。比如说以下一段伪代码:

mounetd(){
  this.loadData()
},
methods:{
  // 获取列表数据
  loadData(reload){ ... },
  // 删除记录
  onDelete(recordId){ 
    this.loading = true
    deletePostAction(recordId)
      .then(res=>...)
      .catch(err=>...)
      .finally(()=>this.loadData(1)}
  }

如果是弹窗编辑页面的话，我一般修改完成之后不会继续做处理。因为当前弹窗内的数据已经是最新的了。
如果在详情页面，其实就是参考列表页这样做处理就行了。

Answer 2

一般就是将修改的数据上传给服务器，然后重新从服务器请求这块数据的新版本并显示到页面原本的位置以确保确实成功修改了服务器上的数据。

一般来说不应该直接刷新整个页面，只需要重新刷新加载被修改的那一部分即可。

Answer 3

改变了哪些数据就用setData更新一下就行了

Answer 4

我个人是这么做的，把主页面的数据给vuex存一份，数据拿vuex的来渲染。在主页面进入的详情页进行修改时，调用接口，接口调用成功，就把vuex里的数据也改掉，在主页面添加数据也一样，进入添加页面，调用接口，接口调用成功，就把vuex里的数据也改掉。这么做的好处就在于你back的时候不用去再次请求数据，而且你分页的时候能返回到你分页的地方而不是返回第一页。

Answer 5

改变了哪些数据，重新更新下那些数据即可，不需要全部页面重新加载，重新加载页面体验不友好。

Answer 6

小改动的话，我就前端直接操作了，比如删除一条数据，在后端告诉我已删除成功时，我就不再请求list列表重新拉数据，直接在前端就将其删除了。

如果不想前端操作的话，直接重新请求一次list接口，拉取最新的数据也行。

比较大的改动时，比如完成一个任务后，既要更新任务状态，也要增加用户的抽奖机机会，还要给用户增加金币之类的操作，总之页面操作很多。我这里是直接刷新页面，让页面中所有的接口，都重新请求一次。