基于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 相关文章推荐
仅用[]()+!等符号就足以实现几乎任意Javascript代码
Mar 01 Javascript
JS判断客户端是手机还是PC的2个代码
Apr 12 Javascript
jquery实现人性化的有选择性禁用鼠标右键
Jun 30 Javascript
jQuery实现表格颜色交替显示的方法
Mar 09 Javascript
通过XMLHttpRequest和jQuery实现ajax的几种方式
Aug 28 Javascript
jQuery图片轮播插件——前端开发必看
May 31 Javascript
简易的JS计算器实现代码
Oct 18 Javascript
在ABP框架中使用BootstrapTable组件的方法
Jul 31 Javascript
jQuery实现的电子时钟效果完整示例
Apr 28 jQuery
JavaScript+HTML5 canvas实现放大镜效果完整示例
May 15 Javascript
JS实现的碰撞检测与周期移动完整示例
Sep 02 Javascript
实例讲解JavaScript 计时事件
Jul 04 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
php获取301跳转URL简单实例
2013/12/16 PHP
phpStorm+XDebug+chrome 配置详解
2019/04/01 PHP
Yii框架实现对数据库的CURD操作示例
2019/09/03 PHP
Prototype使用指南之enumerable.js
2007/01/10 Javascript
js函数的延迟加载实现代码
2012/10/11 Javascript
JQuery写动态树示例代码
2013/07/31 Javascript
js关闭浏览器窗口及检查浏览器关闭事件
2013/09/03 Javascript
鼠标滑在标题上显示图片的JS代码
2013/11/19 Javascript
js字符串截取函数substr substring slice使用对比
2013/11/27 Javascript
JS实现选择TextArea内文本的方法
2015/08/03 Javascript
AngularJS directive返回对象属性详解
2016/03/28 Javascript
JS全局变量和局部变量最新解析
2016/06/24 Javascript
分享javascript、jquery实用代码段
2016/10/20 Javascript
NodeJS使用formidable实现文件上传
2016/10/27 NodeJs
vue2.0 常用的 UI 库实例讲解
2017/12/12 Javascript
vue 实现通过手机发送短信验证码注册功能
2018/04/19 Javascript
微信小程序事件对象中e.target和e.currentTarget的区别详解
2019/05/08 Javascript
微信小程序实现元素渐入渐出动画效果封装方法
2019/05/18 Javascript
Koa从零搭建到Api实现项目的搭建方法
2019/07/30 Javascript
微信小程序实现下滑到底部自动翻页功能
2020/03/07 Javascript
python中 chr unichr ord函数的实例详解
2017/08/06 Python
快速解决PyCharm无法引用matplotlib的问题
2018/05/24 Python
python实现自动登录后台管理系统
2018/10/18 Python
Python 2/3下处理cjk编码的zip文件的方法
2019/04/26 Python
python交互模式下输入换行/输入多行命令的方法
2019/07/02 Python
django中使用Celery 布式任务队列过程详解
2019/07/29 Python
幼师专业求职推荐信
2013/11/08 职场文书
优秀幼教自荐信
2014/02/03 职场文书
文化活动实施方案
2014/03/28 职场文书
销售个人求职信范文
2014/04/28 职场文书
购房意向书
2014/08/30 职场文书
2014乡镇党委副书记对照检查材料思想汇报
2014/10/09 职场文书
2014年化验室工作总结
2014/11/21 职场文书
未婚证明格式
2015/06/15 职场文书
原生JS封装vue Tab切换效果
2021/04/28 Vue.js
详解Django的MVT设计模式
2021/04/29 Python