返回顶部
首页 > 资讯 > 精选 >Vuex无法观察到值变化如何解决
  • 725
分享到

Vuex无法观察到值变化如何解决

2023-07-04 13:07:45 725人浏览 薄情痞子
摘要

这篇文章主要介绍“Vuex无法观察到值变化如何解决”,在日常操作中,相信很多人在Vuex无法观察到值变化如何解决问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Vuex无法观察到值变化如何解决”的疑惑有所帮助!

这篇文章主要介绍“Vuex无法观察到值变化如何解决”,在日常操作中,相信很多人在Vuex无法观察到值变化如何解决问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”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无法观察到值变化如何解决”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!

--结束END--

本文标题: Vuex无法观察到值变化如何解决

本文链接: https://www.lsjlt.com/news/345480.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • Vuex无法观察到值变化如何解决
    这篇文章主要介绍“Vuex无法观察到值变化如何解决”,在日常操作中,相信很多人在Vuex无法观察到值变化如何解决问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Vuex无法观察到值变化如何解决”的疑惑有所帮助!...
    99+
    2023-07-04
  • Vuex无法观察到值变化怎么办
    这篇文章主要为大家展示了“Vuex无法观察到值变化怎么办”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Vuex无法观察到值变化怎么办”这篇文章吧。在跨越主路由视...
    99+
    2024-04-02
  • vue如何观察slot的变化
    这篇文章主要介绍vue如何观察slot的变化,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!如何观察slot的变化有时我们需要知道slot内的内容什么时候发生了变化:<!-- 可惜这个活动不存在&nbs...
    99+
    2023-06-27
  • Vue2.0如何使用watch观察prop变化
    这篇文章主要介绍Vue2.0如何使用watch观察prop变化,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!具体如下:A 组件:export default { ...
    99+
    2024-04-02
  • vue3无法安装vuex如何解决
    本文小编为大家详细介绍“vue3无法安装vuex如何解决”,内容详细,步骤清晰,细节处理妥当,希望这篇“vue3无法安装vuex如何解决”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。vue3无法安装vuex的解决...
    99+
    2023-07-04
  • vue如何使用watch观察路由变化重新获取内容
    小编给大家分享一下vue如何使用watch观察路由变化重新获取内容,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!问题背景:点击用户头像 => 进入用户个人中心,在用户个人中心里点击其...
    99+
    2024-04-02
  • 电脑无法观看视频如何解决
    如果您的电脑无法观看视频,您可以尝试以下解决方法:1. 更新浏览器:您可以尝试更新您使用的浏览器,因为较新版本的浏览器通常支持更多的...
    99+
    2023-09-07
    电脑
  • 如何理解从观察者模式到响应式的设计原理
    这篇文章主要介绍“如何理解从观察者模式到响应式的设计原理”,在日常操作中,相信很多人在如何理解从观察者模式到响应式的设计原理问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”如何理解从观察者模式到响应式的设计原理...
    99+
    2023-06-16
  • win7无法连接到system如何解决
    如果Windows 7无法连接到System,可以尝试以下解决方法:1. 检查网络连接:确保你的计算机已连接到正常的网络。可以尝试重...
    99+
    2023-09-02
    win7
  • windows无法连接到wifi如何解决
    这篇文章主要介绍了windows无法连接到wifi如何解决的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇windows无法连接到wifi如何解决文章都会有所收获,下面我们一起来看看吧。方法一: 首先右击桌面此电...
    99+
    2023-07-02
  • Sql2008R2无法连接到WMI如何解决
    本篇内容主要讲解“Sql2008R2无法连接到WMI如何解决”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Sql2008R2无法连接到WMI如何解决”吧!Sql2008R2无法连接到WMI解决办...
    99+
    2023-07-04
  • plsql无法找到oci dll如何解决
    在解决 PL/SQL 无法找到 OCI DLL 的问题之前,首先需要确保以下几个步骤已经完成: 确认你的计算机上已经安装了 Or...
    99+
    2023-10-28
    plsql
  • word无法初始化visual如何解决
    这个问题可能是由于缺少必要的依赖项或出现了一些配置问题引起的。以下是一些可能的解决方法:1. 确保已正确安装了Microsoft V...
    99+
    2023-10-09
    word
  • Spring注解@Value在controller无法获取到值的解决
    目录一、前言二、properties加入到Spring容器中有两种方式1、以注入bean的形式2、以下面这种形式三、将properties注册到Spring容器1、weixin.pr...
    99+
    2024-04-02
  • mfc控件无法添加变量如何解决
    如果MFC控件无法添加变量,可能是因为以下原因:1. 控件的类没有正确继承自MFC的控件类。确保你的控件类继承自适当的基类,比如CB...
    99+
    2023-09-07
    mfc
  • win101607系统无法改变更新如何解决
    这篇文章主要讲解了“win101607系统无法改变更新如何解决”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“win101607系统无法改变更新如何解决”吧!在Windows10系统,在打开系...
    99+
    2023-07-01
  • eclipse无法找到共享库如何解决
    当Eclipse无法找到共享库时,可能是由于以下几个原因导致的:1. 缺少依赖库:检查Eclipse所需的共享库是否存在并完整。可以...
    99+
    2023-09-23
    eclipse
  • eclipse无法找到ant文件如何解决
    有以下几种可能的解决方法:1. 确保Ant已经正确安装并配置:在Eclipse中,打开“Windows”菜单,选择“Preferen...
    99+
    2023-09-22
    eclipse
  • 电脑无法连接到internet如何解决
    这篇“电脑无法连接到internet如何解决”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“电脑无法连接到internet如何...
    99+
    2023-07-01
  • Vue无法检测到数组变动怎么解决
    这篇“Vue无法检测到数组变动怎么解决”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“Vue无法检测到数组变动怎么解决”文章吧...
    99+
    2023-07-04
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作