基于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之可拖动的iframe效果代码
Aug 01 Javascript
Javascript结合css实现网页换肤功能
Nov 02 Javascript
细说浏览器特性检测(2)-通用事件检测
Nov 05 Javascript
node.js实现多图片上传实例
Jun 03 Javascript
js判断输入字符串是否为空、空格、null的方法总结
Jun 14 Javascript
基于vue.js实现图片轮播效果
Dec 01 Javascript
Javascript 对cookie操作详解及实例
Dec 29 Javascript
JavaScript中的编码和解码函数
Feb 15 Javascript
详解HTML5 使用video标签实现选择摄像头功能
Oct 25 Javascript
微信小程序使用picker实现时间和日期选择框功能【附源码下载】
Dec 11 Javascript
Cocos2d实现刮刮卡效果
Dec 20 Javascript
vue实现评价星星功能
Jun 30 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处理换行符的问题 \r\n
2013/06/13 PHP
php+ajax实现无刷新文件上传功能(ajaxuploadfile)
2018/02/11 PHP
可拖动窗口,附带鼠标控制渐变透明,开启关闭功能
2006/06/26 Javascript
javascript读取RSS数据
2007/01/20 Javascript
解决extjs在firefox中关闭窗口再打开后iframe中js函数访问不到的问题
2008/11/06 Javascript
js如何调用qq互联api实现第三方登录
2014/03/28 Javascript
js重写alert控件(适合学习js的新手朋友)
2014/08/24 Javascript
javascript常见数字进制转换实例分析
2016/04/21 Javascript
JS中mouseover和mouseout多次触发问题如何解决
2016/06/06 Javascript
ES6中Proxy代理用法实例浅析
2017/04/06 Javascript
JS实现简单拖拽效果
2017/06/21 Javascript
js实现本地时间同步功能
2017/08/26 Javascript
JavaScript登录验证基础教程
2017/11/01 Javascript
微信小程序性能优化之checkSession的使用
2019/03/06 Javascript
Vuex的实战使用详解
2019/10/31 Javascript
在vue+element ui框架里实现lodash的debounce防抖
2019/11/13 Javascript
Vue Cli3 打包配置并自动忽略console.log语句的方法
2020/04/23 Javascript
vue.js 输入框输入值自动过滤特殊字符替换中问标点操作
2020/08/31 Javascript
python 判断自定义对象类型
2009/03/21 Python
python用字典统计单词或汉字词个数示例
2014/04/22 Python
python爬虫之xpath的基本使用详解
2018/04/18 Python
解决DataFrame排序sort的问题
2018/06/07 Python
Python函数返回不定数量的值方法
2019/01/22 Python
python字符串切割:str.split()与re.split()的对比分析
2019/07/16 Python
Python中的四种交换数值的方法解析
2019/11/18 Python
python-OpenCV 实现将数组转换成灰度图和彩图
2020/01/09 Python
python subprocess pipe 实时输出日志的操作
2020/12/05 Python
一款超酷的js+css3实现的3D标签云特效兼容ie7/8/9
2013/11/18 HTML / CSS
写给保洁员表扬信
2014/01/08 职场文书
学年末自我鉴定
2014/01/21 职场文书
管事部库房保管员岗位职责
2014/02/21 职场文书
公司会计主管岗位责任制
2014/03/01 职场文书
项目采购员岗位职责
2014/04/15 职场文书
《鸟岛》教学反思
2014/04/26 职场文书
2015年度培训工作总结范文
2015/04/02 职场文书
zabbix监控mysql的实例方法
2021/06/02 MySQL