use onMounted is a pinia store work well

[allenchannn]

Reproduction

just as follow

Steps to reproduce the bug

I have a question that has been bothering me.
What if I use onMounted in a pinia store?
as follows:

 import { onMounted, ref } from 'vue'; 
 import { defineStore } from 'pinia';
 import apiReq from 'api'  

export default defineStore('test-store', () => {   
     const arr = ref([])

    // init data after mount 
    onMounted(async () => { 
      const data = await apiReq()       
      arr.value = data
   })
     
    return {arr}
}) 

In definition, it's used as a vue composition which uses onmounted or maybe other vue-hook function.
But what i think is that a store is only define structure, we cannt do any initial in it.

if this is not a bug, does pinia would like to recommend this definition?
Btw, are there any code standards for pinia which pinia recommends? Thx.

Expected behavior

onmouted wont be work

Actual behavior

work as usual

Additional information

No response

[posva]

You should usually avoid it as the store could be instantiated outside of a component lifecycle and therefore never trigger the function passed to onMounted().

You should also guard it:

import { getCurrentInstance } from 'vue'

// ...
if (getCurrentInstance()) {
  onMounted(() => {
  })
}

An equivalent to onUnmounted() for stores is onScopeDispose() (https://vuejs.org/api/reactivity-advanced.html#onscopedispose) but this only triggers if you dispose of the store with store.$dispose()

[hyousi]

is there any plan to create a eslint rule sets for it?

[DawidKopys]

Hello, @posva, isn't onScopeDispose an equivalent of onUnmounted - not onMounted as you stated?

[posva]

yes, updated

[robokozo]

I was preparing this small reproduction demo so help describe my problem but the onScopeDispose solved it. :D thanks!

(Composables used within a store would fire the onUnMounted, which in my case were unregistering inappropriately)
https://play.pinia.vuejs.org/#eNqNVE1v2zAM/SuaL0mwxGrSoQPapMg+etgwbMXa3XxxbCZVa0uCJDsBjPz3UZI/2yLIIYglPj6STySr4IuUYVlAcB0sdaKYNESDKSTJYr5bRYHRUXAbcZZLoQypiIItOZKtEjmJAvSLgtZ4H+9g3phC6o6WOgpuBpjFELNoMRFPBNeGSLwlKxtqbFQBk4gvqc8NM8GDgVxmsQE8EbL0YcsZ22K61hUTXvroHWCBAMg01JaFt2wKYwQn6yRjyUvtjYE/1CyPYrfLYEk9DF2WtBc6mAa+qFkey/BZC44aVpY3qg0o3TVxN/ZOMs5iexMF1H2HoPPZRom9BoX+UTBtoGtUhKZQGiEyPYsl825Pxkh9TWmScsSnkLFShRwM5TKnb3zWV+FVOKcZ21AMRBlP4TAMgx6zFPJz2Bvo+iKcfwo/O9bysibNLaslPUb8iLIYje+4ZbtXoiQilywD9Ucahu88ECfOMrH/6e7sk7cpJk+QvLxz/6wPPut7BShfic/V2kysdmC8+e7hNxzwuzXmIi0yRJ8w/gUtssLm6GFfC55i2j2cy/aHe2PGd4/67mCA66Yom6hTw+GdzN9OlN6lexle9lRMRMENdobRKGE7fylsGYcHIxQ0czhy3TTqDWmhMaLz7mY1pFZ/oeONLd/OERwc3M8cunjSVT/EeFRnMZqS8YSsbn3a9ufdKvxvAq16ccc4tBalcJco3odhcWjD+tr9cO7qEfwfzx1NOsXDQyIkfGcaa+qkQDoUYijFUCyrQyOsg/pCdF18g7cFnNo6KSvdB3Erjcxxmaj6oqo8W9jWjEWjC/U+r5dIuwNP6tDL5XQmi1OxuhZ41Va4a62mZwqsUBD81Q20LXhi23rw/JUFNF3SCOF3+sXkpmFoAE+xHTG0+yZrXqiMswLIxxWZdw573DliH8ZpelcCN7+YxtnDiLgr7BbHKa3ZJp3PsJZx08nO1jIqyEUJ55DiiPbI32lxvD8Gx/92xYCQ

[mrleblanc101]

I've just had to use this.
I have a composable that creates an event listener (websocket messages), and I wanted automatic cleanup using onUnmounted.
The composable can also be used in the store for some global data, so the onUnmounted is not necessary, in fact it needs to be removed otherwise I get a warning in the console.
I didn't know what to use until I found this, is there something clearer than if (getCurrentInstance()) ?

[mrleblanc101]

If I have a composable that can be used inside and outside a store.
Instead of:

if (getCurrentInstance()) {
    onUnmounted(() => {
        unsubscribe();
    });
}

Should I use:

onScopeDispose(() => {
    unsubscribe();
});