Vuex随笔

最近在项目中使用到了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 为空的话，则重新请求一次，这个方案感觉并不是特别可取，但我也想不到其他的好的方案，如果有读者恰好遇到了相同的问题，并且看到了这篇文章，如果有更好的解决方案，可以留言给我，大家共同讨论。