189 8069 5689
这篇文章主要为大家展示了“Vuex无法观察到值变化怎么办”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“Vuex无法观察到值变化怎么办”这篇文章吧。
创新互联公司是一家专注于网站设计制作、网站建设与策划设计,淇县网站建设哪家好?创新互联公司做网站,专注于网站建设10多年,网设计领域的专业建站公司;建站业务涵盖:淇县等地区。淇县做网站价格咨询:028-86922220
在跨越主路由视图时，由于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无法观察到值变化怎么办”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！