pinia必看避坑指南:几行代码规避隐藏bug!

简介: 【8月更文挑战第17天】pinia必看避坑指南:几行代码规避隐藏bug!

需求描述

这几天开发,遇到一个很常见的需求:点击一个按钮,出现一个全局的表格;点击返回或者菜单按钮,表格消失,回到初始页面。
4444.gif

代码实现

代码的实现也很简单,首先在store中定义控制表格的显影状态listVisible

export const loopControlList = defineStore('loopControlList', {
    state: (): State => {
        return {
            listVisible: false,
        };
    },
    actions: {
        setVisible(value: boolean) {
            this.listVisible = value;
        },
    }
});

然后代码中引入,通过v-if控制显影

<template>
  <div>
    // 主应用
    <MainBox v-show="!loopListStore.listVisible" />
    // 表格组件
    <LoopModuleList v-if="loopListStore.listVisible" />
  </div>
</template>
  <script setup>
  import {
   
    loopControlList } from '@/store/loopControlList';
  const loopListStore = loopControlList();
</script>

代码实现非常简单,相信大家没有任何问题。

有的人可能会杠,这么简单的问题为什么要使用pinia?注意,这里我只是把复杂的业务简单化了,抽象成了方便大家理解问题的简答代码场景

问题描述

我们的架构是基于qiankun框架的,所有应用也都是通过子应用的方式接入框架的。当点击主应用的路由按钮时(下图照明按钮),会重新加载子应用的所有资源(network触发新的请求)。加载.gif
但是,仔细看,当我点击【手动】按钮进入表格后,在点击主应用路由按钮【照明】后,就有问题了!
1ae90e2fd9c9eb5970d89e78bfeece8b.gif
点击【照明】按钮,理论上子应用被重新加载,页面应该回到初始页面,但奇怪的是,居然直接进入了表格页面!

bug问题分析

出现这种问题,显然是一个bug,无非就是路由问题或者代码问题。很明显,路由的资源都被重新加载了,路由的问题概率不大,大概率是我们的代码问题。我们用了store进行了状态管理,先看一下store的值吧。
借助vue的调试工具,在没有打开表格页面前,store中的listVisible值是false没有问题。
image.png
我们打开表格,store中的listVisible值是true也没有问题
image.png
但是,当我们点击主应用的路由按钮重新加载子应用时,意外出现了!store中的listVisible值居然没有变化!
image.png
这就奇怪了!子应用的所有资源都被重新加载了,但是store中的值缺没有被初始化!居然还是页面注销前的状态值!
但如果我手动刷新页面,功能又会恢复正常!
看来bug的原因找到了:表格出现时,store中的listVisible值改成了true,当点击主应用的路由按钮时,虽然子应用被重载,但store中的listVisible值没变,导致点击路由时页面默认进入表格!

这么看来,store的状态值,会基于某种机制被浏览器缓存起来,除非强制刷新页面,否则这个状态值不会轻易改变!

如何解决

要规避这种问题,其实也非常简单,就是我们手动更改store中的值,比如在页面注销时,将值设为初始状态。

<template>
  <div>
    // 主应用
    <MainBox v-show="!loopListStore.listVisible" />
    // 表格组件
    <LoopModuleList v-if="loopListStore.listVisible" />
  </div>
</template>
  <script setup>
  import {
   
    loopControlList } from '@/store/loopControlList';
  const loopListStore = loopControlList();

  onBeforeUnmount(()=>{
   
   
      loopListStore.setVisible(false)
  })
</script>

这样做的话,就会完美解决问题

总结

在某些场景下,即使页面资源重新加载,store中的值也不会改变,而是维持着页面注销前的状态。因此,为了解决这个机制带来的可能异常,我们要养成良好的习惯,在页面注销时,进行store的销毁。

当然,至于为什么store的值在资源重载时没有改变,笔者也没有搞明白原理,希望各位大佬能答疑解惑!

相关文章
|
2月前
|
缓存 JavaScript
pinia必看避坑指南:几行代码规避隐藏bug!非常重要!
【10月更文挑战第16天】pinia必看避坑指南:几行代码规避隐藏bug!非常重要!
46 4
|
5月前
|
缓存 JavaScript 前端开发
没想到 Vue 中滥用 watch 危害这么大!吓得我连夜修改代码
没想到 Vue 中滥用 watch 危害这么大!吓得我连夜修改代码
|
8月前
|
JSON 缓存 前端开发
编写代码前,如何规避尽可能多的前端bug?
编写代码前,如何规避尽可能多的前端bug?
83 0
|
8月前
|
移动开发 缓存 开发框架
ReactNative 常见问题及处理办法(加固混淆)
ReactNative 常见问题及处理办法(加固混淆)
74 0
|
缓存 前端开发 JavaScript
前端Vue小项目的一个非常诡异离谱的"眼神不好"Bug
公司放假, 现在来提升自己的前端的技术, 想着使用饿了么UI搭建一个简单的页面, 并完成mock数据的获取, 一个小项目就好了....
91 0
|
JavaScript 前端开发 Java
前端项目里常见的十种报错及其解决办法
前端项目里常见的十种报错及其解决办法
355 0
|
Web App开发 JavaScript
源码方法论:读vue3源码时遇到问题,我该如何验证?
源码方法论:读vue3源码时遇到问题,我该如何验证?
126 0
关于《生成器运行时机导致的难以察觉的 bug》勘误
关于《生成器运行时机导致的难以察觉的 bug》勘误
88 0
生成器运行时机导致的难以察觉的 bug
生成器运行时机导致的难以察觉的 bug
81 0
|
JSON 前端开发 数据格式
#yyds干货盘点 【React工作记录十二】前端对接口参数错误如何解决
#yyds干货盘点 【React工作记录十二】前端对接口参数错误如何解决
183 0
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等