在跨越主路由视图时,由于Vuex的状态值一直存储在内存中,所以在组件视图重新载入时,可能会出现组件无法检测到状态值的变化,从而导致业务逻辑出现错误。

假定通用头部组件有一个全局任务状态值,其他的组件都要根据此任务值进行更新,更可能出现的情况是,任务状态值是异步加载完成的,于是需要如此编写业务逻辑:

computed : {
    task () {
        return this.$store.state.task
    }    
},

watch : {
    task : {
         deep: true,
         handler (val) {
             // 由于是异步载入,所以只能在状态值的变化时执行渲染操作
             // 绝不可在mounted中执行render方法
             this.render(val)
         }
    }    
}

但是,由于上面的原因,第一次载入视图时,因为Vuex的状态值还没有存储在内存中,所以渲染正常。发生了视图切换后,虽然也重新载入了任务状态值,但由于task并没有发生变化,所以render方法不会被调用,于是组件无法完成渲染过程。

解决的办法很简单,强行触发task值发生改变,方法是定义一个时间戳,如果觉得在时间戳的粒度仍然太粗,还可以组合使用随机数,如下:

watch: {
    taskId : {
         handler (val) {
             // 从v-model获取到的新值
             let taskId = this.taskId
             // 提交新值变化
             this.$store.commit(TASK_ID, 
             {
                  id : taskId,
                  //    添加时间戳
                  time : Date.now().valueOf(),
                  //    添加随机数
                  random : Math.random()
             })
         }
    }
}

经过上面的处理,只要发生taskId的赋值现象,那么一定会触发Vuex的状态变化,所以每次组件载入时或taskId的值发生变化时,render方法就一定会被执行。

结论

为了满足Vuex的值传递要求,尤其是需要强行刷新Vuex的缓存时,添加时间戳与随机数不失为一种好的解决方案。

Logo

前往低代码交流专区

更多推荐