Questions about "dx: warn users when computed is self-triggering"

[SirH3nry]

More information here: #10299
and here: f7ba97f
and here: https://vuejs.org/guide/essentials/computed.html#getters-should-be-side-effect-free

I'm not sure why I'm receiving this warning, after following the stack trace, it brought me to two locations that don't seem to be getters with side effects.

Here's the first occurrence:

const messages = computed<Array<AlertMessageInterface>>(() => {
  const messages: Array<AlertMessageInterface> = AlertMessageStore().getAlertMessages
  const messagesFiltered = messages.filter(x => !props.sources || props.sources?.includes(x.source))
  return orderBy(messagesFiltered, (x) => getOrder(x))
})

and here's the second, the stack trace of the warning points to the watch, not the getter.

// ProcessingMaskStore().getOperationCount is a Pinia getter with no side effects
const operationCount = computed<number>(() => ProcessingMaskStore().getOperationCount)

watch(operationCount, () => {
  if (operationCount.value > 0 && !isRunning.value) start()
  else if (operationCount.value === 0) reset()
}, {
  immediate: true
})

[Doctor-wu]

A minimal reproduction will be great, a repo will be OK as well

[SirH3nry]

I'm trying to make a minimal reproduction but I'd need Pinia installed for it to be faithful, is it possible to add it to play.vuejs.org? I also can't share our repo because it's private.

[Doctor-wu]

You can just simulate a pinia, if that didn't work, the fastest way is to create a test repo for that

[Doctor-wu]

Hey @SirH3nry, check this #10341 (comment)

[emikoshi]

I was following the other thread of the discussion you both were having. I started noticing this issue after updating vue to 3.4.19. I tried following the stack trace like @SirH3nry did but took me on a wild goose chase of fairly basic usage of my stores. From what I can discern at glance it has to do with mapState. I've added a simple repro link:

https://play.pinia.vuejs.org/#eNqNVMFu2zAM/RXBFydAIrVIV2BZGmQbCmw7bMM67DLvoNpMok6WBElOAwT+91Fy7DhZg+YkkXwkHymKu+S9MXRTQTJNZh5KI7mHeaYImZn5J7BAhCN+DcR5jcKGywoIn5Ldjtf1jJnXoCpA1YtQ3kAiQNuSy1/ctsAZ67gQlFxuhfFEcrW6yxLvsgQxojTaerIjJTcPHqGkJkurS5IaoQRP3/UglYOHyKqFUJbrSnmw1Lu0ByxgKRR81CgrUL7DY4dCQNhGHKJ4JePZRw92ocSCez4YxishFnxlFdlLhHSVTkm6Bik1edZWFumoAdThqKOQY9TKQ4H9aWyU0rbSQVvPiPxOeToiqUr/DKNbcK6HSHXGmq7Nk1HSlDdGd/rktMK3jjGzvQH72WXJEiw1yFmy9t64KWN5odCtACk2lirwTJmSLRDGLLZQlDAudLmY0Bt6/ZYVwvm+noIrx49WPzvs9RNm2lca8zBUbsCOLagCp8JemvfE7Sj3ie18/jglTUYW7+ehMWkBG6+1dGNuxKVE+z6LW/qGXjMpHhkmYgL5bf/ryLiA8pLoLXRxRa9v6G2Mupnsg5YhahwGnAV8fu9yrZZidfL4YcKEBPvNeKHV8RBwHM3nL1HnbQUdxXwN+d8X9E9u27D+biG+QK8sz+0KfGO+f/gKW7x3xlIXldwP3BnjD3BaVoFjA/tQqQJp93CR7ec4y0Ktfrr7rQfl2qIC0cO/im0OX/Zc6Qe6EzrpdfGwMLCFJwvjeLk0+6e3VSwsR92HPtopmeqWCr6R84dNddcPPUjjUsWfPhiSu3lDtnFQiMT4g6vhQcf3upuwCIK6XUOIHvFY0DCp/wFs/gN7