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


Posted in Javascript onMarch 01, 2018

在跨越主路由视图时,由于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无法观察到值变化的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jscript之List Excel Color Values
Jun 13 Javascript
eval的两组性能测试数据
Aug 17 Javascript
jQuery分别获取选中的复选框值的示例
Jun 17 Javascript
项目中常用的JS方法整理
Jan 30 Javascript
VUEJS实战之构建基础并渲染出列表(1)
Jun 13 Javascript
node+vue实现用户注册和头像上传的实例代码
Jul 20 Javascript
通过示例彻底搞懂js闭包
Aug 10 Javascript
AngularJS中的路由使用及实现代码
Oct 09 Javascript
vue中的计算属性的使用和vue实例的方法示例
Dec 04 Javascript
JavaScript实现计算圆周率到小数点后100位的方法示例
May 08 Javascript
Vue组件全局注册实现警告框的实例详解
Jun 11 Javascript
80行代码写一个Webpack插件并发布到npm
May 24 Javascript
Node.js readline模块与util模块的使用
Mar 01 #Javascript
基于 Immutable.js 实现撤销重做功能的实例代码
Mar 01 #Javascript
浅谈vue的几种绑定变量的值 防止其改变的方法
Mar 01 #Javascript
JavaScript 中定义函数用 var foo = function () {} 和 function foo()区别介绍
Mar 01 #Javascript
详解用Node.js写一个简单的命令行工具
Mar 01 #Javascript
vue-prop父组件向子组件进行传值的方法
Mar 01 #Javascript
Node.js 利用cheerio制作简单的网页爬虫示例
Mar 01 #Javascript
You might like
Excel数据导入Mysql数据库的实现代码
2008/06/05 PHP
探讨PHP使用eAccelerator的API开发详解
2013/06/09 PHP
Laravel中注册Facades的步骤详解
2016/03/16 PHP
PHP十六进制颜色随机生成器功能示例
2017/07/24 PHP
php实现的顺序线性表示例
2019/05/04 PHP
JavaScript Event事件学习第一章 Event介绍
2010/02/07 Javascript
JQuery在光标位置插入内容的实现代码
2010/06/18 Javascript
基于jquery的返回顶部效果(兼容IE6)
2011/01/17 Javascript
javascript模拟实现C# String.format函数功能代码
2013/11/25 Javascript
jQuery+HTML5美女瀑布流布局实现方法
2015/09/21 Javascript
基于Jquery和html5的7款个性化地图插件
2015/11/17 Javascript
jquery实现ajax加载超时提示的方法
2016/07/23 Javascript
详解基于Bootstrap+angular的一个豆瓣电影app
2017/06/26 Javascript
Node.js自定义实现文件路由功能
2017/09/22 Javascript
最简单的JS实现json转csv的方法
2019/01/10 Javascript
深入理解es6块级作用域的使用
2019/03/28 Javascript
前端js中的事件循环eventloop机制详解
2019/05/15 Javascript
JavaScript实现页面中录音功能的方法
2019/06/04 Javascript
JS工厂模式开发实践案例分析
2019/10/17 Javascript
详解JavaScript修改注册表的方法
2020/01/05 Javascript
JS 数组和对象的深拷贝操作示例
2020/06/06 Javascript
[03:34]2014DOTA2西雅图国际邀请赛 淘汰赛7月15日TOPPLAY
2014/07/15 DOTA
Python模拟随机游走图形效果示例
2018/02/06 Python
代码分析Python地图坐标转换
2018/02/08 Python
Python 使用 attrs 和 cattrs 实现面向对象编程的实践
2019/06/12 Python
django admin 自定义替换change页面模板的方法
2019/08/23 Python
Django实现文件上传和下载功能
2019/10/06 Python
使用sklearn的cross_val_score进行交叉验证实例
2020/02/28 Python
python判断字符串以什么结尾的实例方法
2020/09/18 Python
python安装sklearn模块的方法详解
2020/11/28 Python
如何通过Python实现RabbitMQ延迟队列
2020/11/28 Python
会计专业个人求职信范文
2014/01/08 职场文书
淘宝网店营销策划书
2014/01/11 职场文书
违反纪律检讨书范文
2015/05/07 职场文书
2015年入党积极分子培养考察意见
2015/08/12 职场文书
SpringBoot2零基础到精通之异常处理与web原生组件注入
2022/03/22 Java/Android