vue复习踩坑--vuex数据更新以及页面获取

vue复习踩坑–vuex数据更新以及页面获取
今天复习vuex的使用,复习了一下,页面改变从vuex中获取的数据,然后再切换页面之前beforeDestroy阶段将更新的数据赋值回去vuex中,但是到了另一个页面,按常规操作是在created中获取数据,但是在这里created貌似会发生延迟的现象,vuex改变了,但是页面拿到的还是旧的数据。效果如下:
app.vue
vue复习踩坑--vuex数据更新以及页面获取_第1张图片
1,页面一,
vue复习踩坑--vuex数据更新以及页面获取_第2张图片
页面一代码,点击加一,并且在销毁之前将新数据传递回去
vue复习踩坑--vuex数据更新以及页面获取_第3张图片
2,页面二
vue复习踩坑--vuex数据更新以及页面获取_第4张图片
页面二代码
vue复习踩坑--vuex数据更新以及页面获取_第5张图片
3,不难看出,如果在页面直接获取vuex中的数据是可以的,利用computed来监控数据也是可以得到新数据的,唯独使用created不行,跳转过去是旧数据,跳出去再进去就更新了,貌似第一次进去created里面那一行没执行的样子。
vue复习踩坑--vuex数据更新以及页面获取_第6张图片
4,一个解决办法(加了个定时器),的确可以了,但是加定时器竟然能够实现数据更新,说明了什么问题?但是延时这种操作有什么意义?跟获取数据啥关系?
4.1
vue复习踩坑--vuex数据更新以及页面获取_第7张图片
4.2
vue复习踩坑--vuex数据更新以及页面获取_第8张图片
5,换个生命周期函数mounted,就可以了,但是为什么?mounted都已经到了操作dom的阶段,为什么在这个时期获取数据就能获取到新数据?created还太早?mounted才是时候?生命周期真是个迷
5.1
vue复习踩坑--vuex数据更新以及页面获取_第9张图片
5.2
vue复习踩坑--vuex数据更新以及页面获取_第10张图片

你可能感兴趣的:(vue,vue)