最近在项目中使用到了vuex,但是在配合vue使用时,也还是遇到了不少的问题,最终还是解决了问题,因此写一篇随笔来记录期间遇到的问题吧
项目概要:
Vuex中所储存的的状态如下:
Vue中:有一个tabEntrance组件 与一个productList组件, productList是tabEntrance下的一个子路由
并且在两个组件的计算属性中分别返回了state中的baseList
<-------------------------正常执行------------------------------------------>
在正常的逻辑中,我首先在tabEntrance的mounted中完成了对baseList的初始化工作:
(response是请求的返回结果)
然后再将路由push到productList:
,
紧接着,我在productList的mounted中去读取这个baseList,整个流程是可以正常完成的,为了方便理解,我在两个组件的mounted中加了一些log,方便看出流程顺序
这是从tabEntrance 进入productList是,控制台的顺序输出,程序此时的执行顺序 是完全可以理解的
<-------------------------问题所在------------------------------------------>
在此之前,我以为程序是正常的,但是当我尝试在 该路由下F5刷新时,问题来了,此时并不是先执行的tabEntrance的mounted,然后再执行的productList的mounted,反而恰恰相反,先执行的productList 的mounted,然后再执行的tabEntrance的mounted,由控制台的输出可以见得:
这恰恰是问题所在,因为先执行了productList的mounted,而在productList的mounted中操作了baseList数组,但是我的baseList数组初始化却是在tabEntrance中完成的,这必然会导致无法获取到baseList的问题
<-------------------------解决方案------------------------------------------>
为了解决这个问题,我在productList中做了一次判断, 如果 当前的 this.baseList.length 为空的话,则重新请求一次,这个方案感觉并不是特别可取,但我也想不到其他的好的方案,如果有读者恰好遇到了相同的问题,并且看到了这篇文章,如果有更好的解决方案,可以留言给我,大家共同讨论。