给 Pinia 加一个定位代码的功能(支持 reactive)

pinia 的 timeline 很好很强大,只是到目前为止没有发现有定位的功能,就是说,如果状态发生异常变更的时候,如何快速找到,到底是哪一行代码触发的变更?

watch + error 定位代码

定位代码可以使用 Error 的方式来获得,那么这个Error放在哪里呢?

因为 pinia 的 store 本身就是一个 reactive,所以可以用 watch,不过不是在第二个参数,而是第三个参数的 onTrigger() 。

我们写一个函数(按照"流行"的说法,我们封装一个hooks。)

js 复制代码
import { watch } from 'vue'

export default (store: any) => {
  watch(store, (v) => {},
  {
    onTrigger(event) {
      const err = new Error('记录调用函数')
      console.log('err:', err)
      console.log('onTrigger--event:', event)
    },
  })
}

函数需要传入一个 store,然后用 watch 进行监听,在 onTrigger 里面设置 Error(),用来记录调用的函数,然后打印出来就可以定位了,比如这样:

event 可以记录type、key、value等信息。

js 复制代码
onTrigger--event: {type: "set", key: "name", newValue: "aa", ...}

这样哪个状态出问题就 watch 哪个,然后定位代码,就可以很快找到位置了。

适用范围

pinia 的状态有多种变更方式,每一种都可以吗?让我们挨个测试一遍:

方式 序号(从0开始) 是否可行
直接改属性 6 可以
action 8 只能定位到定义的位置
$state - 好像差一行
$patch 6 可以
$reset 8 可以

在 template 里面也是一样的效果。

三种情况有效:直接改属性、 <math xmlns="http://www.w3.org/1998/Math/MathML"> p a t c h 、 patch、 </math>patch、reset()。

state 内部调用 patch,调用的太深,Error()只有十条记录,超出范围,暂时没有找到办法。

action 的定位方法

action 也比较深,如果想定位的话,可以使用 $onAction(),在里面设置 Error。

代码调整如下:

js 复制代码
export default (store: any) => {
  let isAction = false
  watch(store, (v) => {},
  {
    onTrigger(event) {
      if (!isAction) {
        const err = new Error('记录调用函数')
        console.log('err:', err)
        console.log('onTrigger--event:', event)
      }
    },
  })

  store.$onAction((e: any) => {
    console.log('action 的参数:', e.args)
    const err = new Error('记录调用函数--onAction')
    console.log('err:', err)
    isAction = true
    e.after(() => {
      isAction = false
    })
  })
}

这样就可以了。

setup 的方式是否支持?

上面是 option 的方式,那么 setup 是否有效呢?还是老规矩,测试一下。

经过测试,结果也是一样的,都支持。只是 $reset() 不支持 setup 方式。

小结

优点:

  • 侵入性小,不影响代码
  • onTrigger 只在 开发模式有效,生产模式无效

缺点:

  • 比较简单粗暴,没有优化。
  • $state 没能实现定位。
相关推荐
musk12124 分钟前
electron 打包太大 试试 tauri , tauri 安装打包demo
前端·electron·tauri
万少1 小时前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
OpenGL1 小时前
Android targetSdkVersion升级至35(Android15)相关问题
前端
rzl021 小时前
java web5(黑马)
java·开发语言·前端
Amy.Wang1 小时前
前端如何实现电子签名
前端·javascript·html5
海天胜景1 小时前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui
今天又在摸鱼1 小时前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
蓝婷儿1 小时前
每天一个前端小知识 Day 21 - 浏览器兼容性与 Polyfill 策略
前端
百锦再2 小时前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
jingling5552 小时前
面试版-前端开发核心知识
开发语言·前端·javascript·vue.js·面试·前端框架