基于Vuex无法观察到值变化的解决方法

基于Vuex无法观察到值变化的解决方法

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

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

computed : {

task () {

return this.$store.state.task

}

},

watch : {

task : {

deep: true,

handler (val) {

// 由于是异步载入，所以只能在状态值的变化时执行渲染操http://作

// 绝不可在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 : MatwmqZtsTYih.random()

})

}

}

}

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

结论

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。