Vue3's recent update causing "dirty computed getter" warning due to some inner workings of useStore() with mapState()

[SirH3nry]

Paraphrase: when a readonly computed getter contains useStore(), vue3 throws a warning about self-triggering computed getters.
See the following for more information and discussion.
vuejs/core#10341
vuejs/core#10340
vuejs/core#10299
vuejs/core@f7ba97f
playground reproduction

here's the warning:
[Vue warn] Computed is still dirty after getter evaluation, likely because a computed is mutating its own dependency in its getter. State mutations in computed getters should be avoided. Check the docs for more details: https://vuejs.org/guide/essentials/computed.html#getters-should-be-side-effect-free

[eliaschampi]

Hello, I am providing this example, where the warning is being generated.
Previously, I was able to use Pinia stores inside Vue 3 computed properties as follows:

export const useExampleStore = defineStore({
    id: "example",
    state: () => ({
        foo: "foo value"
    }),
    getters: {
        fooBar: () => `${foo} bar`
    },
});

const val = ref("");
const myFooComputed = computed(() => useExampleStore().fooBar);

However, with the latest version, I’m receiving the following warning:

• [Vue warn] Computed is still dirty after getter evaluation, likely because a computed is mutating its own dependency in its getter.

This seems to suggest that there’s an issue with how computed properties are being handled in the latest version.

I believe this is a significant issue that needs to be addressed. Any guidance or updates on this would be greatly appreciated.

[Doctor-wu]

In your case, it can work in this way.

const exampleStore = useExampleStore();
const foll = computed(() => exampleStore.fooBar)

[eliaschampi]

That is a good solution, but when the project is large, and I need only one property of the store, I usually do like this:

// const exampleStore = useExampleStore();
const foll = computed(() => {
    const exampleStore = useExampleStore();
    return exampleStore.fooBar;
})

am I wrong?, thanks and best regards

[Doctor-wu]

usexxxStore in pinia has side-effect, and it's not suggested to invoke in the computed after vue3.4 since it will cause unexpected track.

[posva]

@Doctor-wu is right, you should put the store outside of the computed property

[Doctor-wu]

@posva Thanks for repling ❤️, there have another problem is mapState will return a series of computed and will call useStore inside that computed. That will cause warning as well, are there any approaches to avoid this?

[p1xel007]

I'm having the same issue

[sOMarkus]

We have same issue using Options API for modifiable state
Modifiable state

I've already updated to Vue 3.4.19 and Pinia 2.1.7 - but still same issue.

Usage in Component:

computed: {
    ...mapWritableState(useTemporaryStore, ["currentObject"]),
  },

Store:

import { defineStore } from "pinia";

export const useTemporaryStore = defineStore("TemporaryStore", {
  state: () => {
    return {
      currentObject: null,
    };
  },
});

[bitbybit]

I am getting this warning when getter is accessing another getter from a different store: https://pinia.vuejs.org/core-concepts/getters.html#Accessing-other-stores-getters

[gabrielwillemann]

I have the same issue using mapWritableState

[sOMarkus]

Version 3.4.20 fixed the warnings with mapWritableState
see discussion here

And Commit

dx(reactivity): disable recursive computed warning by default
Now can be enabled with app.config.warnRecursiveComputed option.