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

 更新时间:2018年03月01日 10:15:46   作者:蚁方阵  
下面小编就为大家分享一篇基于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的值传递要求,尤其是需要强行刷新Vuex的缓存时,添加时间戳与随机数不失为一种好的解决方案。

以上这篇基于Vuex无法观察到值变化的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 详解基于Vue,Nginx的前后端不分离部署教程

    详解基于Vue,Nginx的前后端不分离部署教程

    这篇文章主要介绍了详解基于Vue,Nginx的前后端不分离部署教程,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • 使用D3.js+Vue实现一个简单的柱形图

    使用D3.js+Vue实现一个简单的柱形图

    这篇文章主要介绍了使用D3.js+Vue实现一个简单的柱形图,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-08-08
  • el-table表头根据内容自适应完美解决表头错位和固定列错位

    el-table表头根据内容自适应完美解决表头错位和固定列错位

    这篇文章主要介绍了el-table表头根据内容自适应完美解决表头错位和固定列错位,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • vue3 + Ant Design 实现双表头表格的效果(横向表头+纵向表头)

    vue3 + Ant Design 实现双表头表格的效果(横向表头+纵向表头)

    这篇文章主要介绍了vue3 + Ant Design 实现双表头表格(横向表头+纵向表头),需要的朋友可以参考下
    2023-12-12
  • Vue中addEventListener() 监听事件案例讲解

    Vue中addEventListener() 监听事件案例讲解

    这篇文章主要介绍了Vue中addEventListener() 监听事件案例讲解,包括语法讲解和事件冒泡或事件捕获的相关知识,本文结合示例代码给大家讲解的非常详细,需要的朋友可以参考下
    2022-12-12
  • vue如何动态修改meta的title

    vue如何动态修改meta的title

    这篇文章主要介绍了vue如何动态修改meta的title,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06
  • webpack中的optimization配置示例详解

    webpack中的optimization配置示例详解

    这篇文章主要介绍了webpack中的optimization配置详解,主要就是根据不同的策略来分割打包出来的bundle,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-02-02
  • Vue+OpenLayer实现测距功能

    Vue+OpenLayer实现测距功能

    OpenLayers 是一个专为Web GIS 客户端开发提供的JavaScript 类库包,用于实现标准格式发布的地图数据访问。本文将通过Vue和OpenLayer实现测距功能 ,需要的可以参考一下
    2022-04-04
  • vue3 拖拽hooks(可兼容移动端)和自定义指令拖拽的实现代码

    vue3 拖拽hooks(可兼容移动端)和自定义指令拖拽的实现代码

    这篇文章主要介绍了vue3 拖拽hooks(可兼容移动端)和自定义指令拖拽的实现代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考借鉴价值,需要的朋友参考下吧
    2024-01-01
  • Vue props中Object和Array设置默认值操作

    Vue props中Object和Array设置默认值操作

    这篇文章主要介绍了Vue props中Object和Array设置默认值操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07

最新评论