基于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中运用闭包和自执行函数解决大量的全局变量问题
Dec 30 Javascript
《JavaScript高级程序设计》阅读笔记(一) ECMAScript基础
Feb 27 Javascript
Javascript 页面模板化很多人没有使用过的方法
Jun 05 Javascript
ko knockoutjs动态属性绑定技巧应用
Nov 14 Javascript
JS实现商品倒计时实现代码
May 03 Javascript
select多选 multiple的使用示例
Jun 16 Javascript
Javascript 绘制 sin 曲线过程附图
Aug 21 Javascript
AngularJs Modules详解及示例代码
Sep 01 Javascript
js获取元素下的第一级子元素的方法(推荐)
Mar 05 Javascript
快速掌握jquery分页插件jqPaginator的使用方法
Aug 09 jQuery
使用vue2实现带地区编号和名称的省市县三级联动效果
Nov 05 Javascript
小程序多图列表实现性能优化的方法步骤
May 28 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
web目录下不应该存在多余的程序(安全考虑)
2012/05/09 PHP
PHP封装请求类实例分析【基于Yii框架】
2019/10/17 PHP
CheckBox 如何实现全选?
2006/06/23 Javascript
js 使FORM表单的所有元素不可编辑的示例代码
2013/10/17 Javascript
JS实现图片无间断滚动代码汇总
2014/07/30 Javascript
js变量、作用域及内存详解
2014/09/23 Javascript
使用js画图之圆、弧、扇形
2015/01/12 Javascript
JavaScript+CSS无限极分类效果完整实现方法
2015/12/22 Javascript
使用jQuery或者原生js实现鼠标滚动加载页面新数据
2016/03/06 Javascript
Bootstrap源码解读按钮(5)
2016/12/23 Javascript
详解jQuery事件
2017/01/13 Javascript
AngularJS 最常用的八种功能(基础知识)
2017/06/26 Javascript
Vue+SpringBoot开发V部落博客管理平台
2017/12/27 Javascript
微信小程序调用摄像头隐藏式拍照功能
2018/08/22 Javascript
vue展示dicom文件医疗系统的实现代码
2018/08/27 Javascript
微信小程序实现卡片左右滑动效果的示例代码
2019/05/01 Javascript
使用原生JS实现火锅点餐小程序(面向对象思想)
2019/12/10 Javascript
如何在postman测试用例中实现断言过程解析
2020/07/09 Javascript
JavaScript实现多文件下载方法解析
2020/08/07 Javascript
python遍历文件夹并删除特定格式文件的示例
2014/03/05 Python
Flask实现图片的上传、下载及展示示例代码
2018/08/03 Python
Python3.5内置模块之random模块用法实例分析
2019/04/26 Python
Django框架搭建的简易图书信息网站案例
2019/05/25 Python
Python基础学习之类与实例基本用法与注意事项详解
2019/06/17 Python
python获取地震信息 微信实时推送
2019/06/18 Python
Python高级编程之消息队列(Queue)与进程池(Pool)实例详解
2019/11/01 Python
解决Numpy中sum函数求和结果维度的问题
2019/12/06 Python
Windows下Anaconda和PyCharm的安装与使用详解
2020/04/23 Python
如何使用PyCharm将代码上传到GitHub上(图文详解)
2020/04/27 Python
Django Model中字段(field)的各种选项说明
2020/05/19 Python
IntelliJ 中配置 Anaconda的过程图解
2020/06/01 Python
python字典key不能是可以是啥类型
2020/08/04 Python
Lacoste美国官网:经典POLO衫品牌
2016/10/12 全球购物
应聘销售主管的求职信
2014/04/26 职场文书
纪念九一八事变演讲稿:牢记历史,捍卫主权
2014/09/14 职场文书
vue生命周期钩子函数以及触发时机
2022/04/26 Vue.js