最近在项目中使用到了vuex,但是在配合vue使用时,也还是遇到了不少的问题,最终还是解决了问题,因此写一篇随笔来记录期间遇到的问题吧

项目概要:

  Vuex中所储存的的状态如下:

    Vuex随笔

  Vue中:有一个tabEntrance组件 与一个productList组件, productList是tabEntrance下的一个子路由

    Vuex随笔

并且在两个组件的计算属性中分别返回了state中的baseList

Vuex随笔

 

<-------------------------正常执行------------------------------------------>

在正常的逻辑中,我首先在tabEntrance的mounted中完成了对baseList的初始化工作:

(response是请求的返回结果)

Vuex随笔

然后再将路由push到productList:

Vuex随笔,

紧接着,我在productList的mounted中去读取这个baseList,整个流程是可以正常完成的,为了方便理解,我在两个组件的mounted中加了一些log,方便看出流程顺序

Vuex随笔

Vuex随笔

这是从tabEntrance 进入productList是,控制台的顺序输出,程序此时的执行顺序 是完全可以理解的

 

<-------------------------问题所在------------------------------------------>

在此之前,我以为程序是正常的,但是当我尝试在 Vuex随笔该路由下F5刷新时,问题来了,此时并不是先执行的tabEntrance的mounted,然后再执行的productList的mounted,反而恰恰相反,先执行的productList 的mounted,然后再执行的tabEntrance的mounted,由控制台的输出可以见得:

Vuex随笔

这恰恰是问题所在,因为先执行了productList的mounted,而在productList的mounted中操作了baseList数组,但是我的baseList数组初始化却是在tabEntrance中完成的,这必然会导致无法获取到baseList的问题

 

<-------------------------解决方案------------------------------------------>

  为了解决这个问题,我在productList中做了一次判断, 如果 当前的 this.baseList.length 为空的话,则重新请求一次,这个方案感觉并不是特别可取,但我也想不到其他的好的方案,如果有读者恰好遇到了相同的问题,并且看到了这篇文章,如果有更好的解决方案,可以留言给我,大家共同讨论。

 

相关文章:

  • 2022-12-23
  • 2021-06-21
  • 2021-10-14
  • 2021-05-25
  • 2021-12-24
  • 2021-08-15
  • 2021-09-10
  • 2022-01-05
猜你喜欢
  • 2021-10-08
  • 2022-12-23
  • 2021-10-26
  • 2021-12-10
  • 2022-12-23
  • 2021-09-19
相关资源
相似解决方案