This website requires JavaScript.

nuxt ssr项目,修改数据,视图不刷新,但重新刷新页面后恢复正常的问题

分类:编程人生 发布于:2020-07-23 10:22:16 字数 602 205次阅读 javascripttypescript

这个问题困扰了好久,项目上线两周之后依然存在。真的急死人了。

今天仔细思考了一下,为什么会发生这种情况呢?我从以下几个方面思考:

  1. 我的代码是没错的,不然重刷页面之后,不会恢复正常。当然即便是不恢复正常,我也确信的代码写的没有问题。
  2. 之所以会发生这种情况,根本原因是改了数据后,vue的双向绑定没有生效。而在出现这种情况的时候,我在页面点其他的按钮,然后之前点击改动的视图就生效了。。。
  3. 我改动了两种来解决这个问题:
    第一处:
    state.detail = Object.assign({}, data)
    
    每次改动时,重新赋值数据。
    然后,在调试的过程中,发现state.detail的值一直是undefine的。what?!难道是没有赋初始值的问题?

结果一查,还真是,加上初始值,再次测试,恢复正常!我丢~~~

这一次的经验总结一下:

  1. nuxt项目建立在vue框架之上
  2. vue双向绑定数据,改动时,如果不赋初始值,是无法加入vue的双向绑定检测的,而nuxt页面刷新貌似继承了上一次值,这也是为什么我重新刷新时,点击就正常的原因。
  3. nuxt确实坑很多,像这种问题,如果在刷新的时候依然不正常,可能找问题不会花这么多时间,就是因为又好像正常,又好像不正常,常常让人难以提起动力去找这个细小的问题。所以入nuxt坑需要谨慎!