Vuex无法观察到值变化如何解决

这篇文章主要介绍“Vuex无法观察到值变化如何解决”，在日常操作中，相信很多人在Vuex无法观察到值变化如何解决问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Vuex无法观察到值变化如何解决”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

在跨越主路由视图时，由于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无法观察到值变化如何解决”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！