zoukankan      html  css  js  c++  java
  • wex5 实战 单页模式下的多页面数据同步

    在wex5官方教程中,关于多页模式与单页模式进行了对比。两者最大的区别在于:

            1 web加载速度,单页模式快于多页模式

            2  多页模式对加载机制进行了预加载,一次加载之后再次加载,就会加快。

            但是,由于项目需要,多页模式无法满足我对全局变量的绑定属性的获取(大家看我全局可观察变量博文),所以对页面进行了全部重构,重构之后,web加载的响应速度大大提高,没有了明显的卡顿感。但是,也带来了更严重的问题,页面数据不同步。

            起先以为是坑,其实是对页面的加载机制不了解。

            先看一下不同步的情况:

           

           

            新增一条发货单

           

           返加首页,问题来了,货单没有刷新,没有新增

           

            这就是我们今天要着手解决的问题。首先告诉大家,解决之道很简单,简单到想都想不到。关键是,我们今天以解决方法和思维模式为重点。

    二   解决思路:

           1,先判断data有没有新增。

              

                    方法简单,先放到modeLoad里,发现,只能加载一次!!!加载后再从别的页面回来,也不行。       

                    也就是说,别的页面新增或删除修改再跳转回来,modeLoad里的方法只执行一次。

                     手动加一个按钮,看下,data有没有新增,再来试一下:

                    

                        

                     悲剧发生了,手动刷新,居然也不能刷新data,条数还是5条!!!!

                     在单页模式里,小项目也有几十个页面,页面单换来换去,如果有数据操作,其它页面不能响应,数据不同步, 这个项目,估计没法再往下进行了。

                    但是,我发现,每次web重启动后,data就自动刷新到了最新状态。难道是页面刷新问题?

            2  页面刷新

                首先想到了window.location.reload().

                一试,泪崩,整个web重新启动了。不行。

            3. div刷新

                群里很多朋友问div刷新的问 题,估计也是想强制刷新页面内容。

                不行。

             4.windownDialog刷新

                 本来用的单页模式,再装回到多页模式,多此一举。

              一次次的测试,死的心都有了。明明data数据更新了,非要刷什么页面呢?

              data更新?

              data更新?

               再回到原点想问题,想想,还有哪里能时实接收数据????

               想想

               想想

              想到了页面传参与收参paramsReceive

               对,就是这个。

    三  页面同步方法

           1 在页面半闭时,传参,用于触发目标页面的参数接收动作

            

            2  目标页面,接参,并刷新data

                

            再来测试,data和list同步进行了响应和更新。

            之前用了很长时间来刷页面,刷list,刷div,刷窗口,再如此处理,好像白学了。没想到解决方法这么简单。关键是打到问题的根源和实质,需要时间和大量测试。

    四 总结:

          1  学会分步测试

           2 modelParamsRecive具有实时性,无论什么时候跳转至页面,它都在modeload之前进行,只要有参传进来,就能触发。充分利用这一点,可以让data数据实时刷新。

    相关视频制作完成,上传优酷。教学app制作中。我是邯郸戏曲开发,tel:15175073123,qq:1017945251

     

     扫描二维码,看高清教学视频。

  • 相关阅读:
    React 项目 ant design 的 CheckboxGroup 验证
    React 项目中修改 Ant Design 的默认样式(Input Checkbox 等等
    create-react-app 构建的项目使用释放配置文件 webpack 等等 运行 npm run eject 报错
    使用 nodejs 和 axios 以及 cherrio 爬取天气预报
    ant design Radio.Group defaultValue 默认选中没生效
    macOS 更新 git 命令提示 xcrun,.gitignore 配置不生效问题。
    mac 绑定阿里企业邮箱
    create-react-app 构建的项目使用 mobx (说到底就是为了使用装饰器语法对 babel 做些配置
    React 项目使用 React-router-dom 4.0 以上版本时使用 HashRouter 怎么控制 history
    js 操作css
  • 原文地址:https://www.cnblogs.com/fangziffff123/p/6197679.html
Copyright © 2011-2022 走看看