基于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使用vuex解决模块间传值问题的方法
赞 (0)

相关推荐

  • VUE使用vuex解决模块间传值问题的方法

    VUE使用vuex解决模块间传值问题的方法

    在看电影.打Dota.撸代码间来回,犹豫不决,终于还是下决心继续学习VUE. 仿照 conde.js 官网写的一个demo,目前已经基本可用,但始终缺少登录页,没有用户权限管理,于是开撸...... <template> <div id="login"> <c-header></c-header> <c-form></c-form> <p class="content-block">

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

    在跨越主路由视图时,由于Vuex的状态值一直存储在内存中,所以在组件视图重新载入时,可能会出现组件无法检测到状态值的变化,从而导致业务逻辑出现错误. 假定通用头部组件有一个全局任务状态值,其他的组件都要根据此任务值进行更新,更可能出现的情况是,任务状态值是异步加载完成的,于是需要如此编写业务逻辑: computed : { task () { return this.$store.state.task } }, watch : { task : { deep: true, handler (va

  • Objective-C优雅使用KVO观察属性值变化

    目录 引言 KVOController YYCategories 引言 KVO 是苹果为我们提供的一套强大的机制,用于观察属性值的变化,但是大家在日常开发中想必多少也感受到了使用上的一些不便利,比如: 添加观察者和移除观察者的次数需要一一对应,否则会 Crash. 添加观察者和接受到属性变更通知的位置是分开的,不利于判断上下文. 多次对同一个属性值进行观察,会触发多次回调,影响业务逻辑. 为了解决上述三个问题,业界提出了一些方便开发者的开源方案,我们一起来看一下. KVOController K

  • jquery 实时监听输入框值变化的完美方法(必看)

    jquery 实时监听输入框值变化的完美方法(必看)

    只需要同时绑定 oninput 和 onpropertychange 两个事件,但是这并不完美 $('.input-form :input').bind('input propertychange', function() { //获取.input-form下的所有 <input> 元素,并实时监听用户输入 //逻辑 }) 以上代码在因为用的bind,所以当遇到追加的新input标签时,则不能监听了. 如下情景: 由上图可以看到189和135号码是可以监听的,但是新追加的178和188则无效.

  • 基于CORS实现WebApi Ajax 跨域请求解决方法

    概述 ASP.NET Web API 的好用使用过的都知道,没有复杂的配置文件,一个简单的ApiController加上需要的Action就能工作.但是在使用API的时候总会遇到跨域请求的问题,特别各种APP万花齐放的今天,API的跨域请求是不能避免的. 在默认情况下,为了防止CSRF跨站的伪造攻击(或者是 javascript的同源策略(Same-Origin Policy)),一个网页从另外一个域获取数据时就会收到限制.有一些方法可以突破这个限制,那就是大家熟知的JSONP, 当然这只是众多

  • 基于shell脚本中cd命令无效的解决方法

    在学习的时候,经常要切换到固定的文件夹,于是写了个shell脚本用cd命令切换却发现目录切换不了. 代码如下: #! /bin/bash # c.sh cd /mnt/hgfs/vmshare pwd 解释:执行的时候是./c.sh来执行的,这样执行的话终端会产生一个子shell(类似于C语言调用函数),子shell去执行我的脚本,在子shell中已经切换了目录了,但是子shell一旦执行完,马上退出,子shell中的变量和操作全部都收回.回到终端根本就看不到这个过程的变化. 验证解释: #!

  • 基于java时区转换夏令时的问题及解决方法

    一.准备知识 1.America/New_York的夏令时时间如下: 包左不包右 2016-3-13, 02:00:00到2016-11-6, 02:00:00 2017-3-12, 02:00:00到2017-11-5, 02:00:00 2.三字母时区 ID 为了与 JDK 1.1.x 兼容,一些三字母时区 ID(比如 "PST"."CTT"."AST")也受支持. 但是,它们的使用被废弃,这是因为相同的缩写经常用于多个时区 例如 CST:有

  • Angular2监听页面大小变化的解决方法

    一.现象 全屏页面中的图表,在很多的时候需要 resize 一把,以适应页面的大小变化 二.解决 1.引入 : import { Observable } from 'rxjs'; 2.使用(在ngOnInit方法中): ngOnInit() { // 页面监听 Observable.fromEvent(window, 'resize') .debounceTime(100) // 以免频繁处理 .subscribe((event) => { // 这里处理页面变化时的操作 console.lo

  • js中Number数字数值运算后值不对的解决方法

    问题: 37.5*5.5=206.08 (JS算出来是这样的一个结果,我四舍五入取两位小数) 我先怀疑是四舍五入的问题,就直接用JS算了一个结果为:206.08499999999998 怎么会这样,两个只有一位小数的数字相乘,怎么可能多出这么小数点出来. 我Google了一下,发现原来这是JavaScript浮点运算的一个bug. 比如:7*0.8 JavaScript算出来就是:5.6000000000000005 解决方法:网上找到了一些解决办法,就是重新写了一些浮点运算的函数. 下面就把这

  • 基于bootstrap-datetimepicker.js不支持IE8的快速解决方法

    实例如下: if (!Array.prototype.indexOf) Array.prototype.indexOf = function (elt /*, from*/) { var len = this.length >>> 0; var from = Number(arguments[1]) || 0; from = (from < 0) ? Math.ceil(from) : Math.floor(from); if (from < 0) from += len;

  • 基于创建Web项目运行时出错的解决方法(必看篇)

    基于创建Web项目运行时出错的解决方法(必看篇)

    1.目录结构 2.各文件内容 index.jsp <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>$Title$</title> </head> <body> <form action="/Servlet" method="

随机推荐