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