[Vue warn]: Property "$pinia" was accessed during render but is not defined on instance

[jumpapex]

Reproduction

N/A

Steps to reproduce the bug

to use mapState with the following code, browser(Microsoft Edge) console print warning msg:
[Vue warn]: Property "$pinia" was accessed during render but is not defined on instance
but the data is retrieved successfully.

runtime-core.esm-bundler.js:41 [Vue warn]: Property "$pinia" was accessed during render but is not defined on instance.

at
at
at <BaseTransition appear=false persisted=false mode=undefined ... >
at
at <QTabPanels modelValue="disk" onUpdate:modelValue=fn animated="" ... >
at
at <QStep name=2 title="Source" icon="mdi-application-outline" ... >
at <BaseTransition appear=false persisted=false mode=undefined ... >
at
at <QStepper ref="stepper" modelValue=2 onUpdate:modelValue=fn ... >
at <ProtectionWizard onFinishWizard=fn onCancelWizard=fn >
at <BaseTransition appear=true persisted=false mode=undefined ... >
at <Transition appear=true enterFromClass="q-transition--scale-enter-from" enterActiveClass="q-transition--scale-enter-active" ... >
at
at <ProtectionsPage onVnodeUnmounted=fn ref=Ref< Proxy(Object) {_pStores: {…}, …} > >
at
at
at
at <MainLayout onVnodeUnmounted=fn ref=Ref< Proxy(Object) {_pStores: {…}, …} > >
at
at
warn2 | @ | runtime-core.esm-bundler.js:41

  | get | @ | runtime-core.esm-bundler.js:2971
  | reduced. | @ | pinia.mjs:1813
  | run | @ | reactivity.esm-bundler.js:178
  | get value | @ | reactivity.esm-bundler.js:1147
  | get | @ | runtime-core.esm-bundler.js:3407
  | get | @ | runtime-core.esm-bundler.js:2931
  | diskOptions | @ | SourcePage.vue:90

store/storage.js:

...
export const useStorageStore = defineStore('storage', {
  state: () => {
    return {
      disks: [],
      volumes: []
    }
  },
...

components/SourcePage.vue

...
<script>
import { defineComponent, ref } from 'vue'
import { mapState } from 'pinia'
import { useStorageStore } from 'stores/storage'

export default defineComponent({
  name: 'SourcePage',
  setup () {
    const storageStore = useStorageStore()

    return {
      disk: ref(null),
      storageStore,
    }
  },
  computed: {
    ...mapState(useStorageStore, ['disks', 'volumes']),
    diskOptions() {
     // no warnings  
      console.log('disks length: ' + this.storageStore.disks.length);
  
      for (let i = 0; i < this.storageStore.disks.length; i++) {
        const disk = this.storageStore.disks[i]
        console.log('disk: ' + this.storageStore.disks[i].name)
      }

     // [Vue warn]: Property "$pinia" was accessed...
      console.log('disks length: ' + this.disks.length);

      for (const disk of this.disks) {
        console.log('disk: ' + disk.device)
      }
      const options = this.disks.map(disk => {
        return { label: disk.device, value: disk.device }
      })

      return options
    }

Expected behavior

access mapState should not print warning msg

Actual behavior

access mapState print warning msg

Additional information

some packages version:
"pinia": "^2.1.4",
"quasar": "^2.6.0",
"vue": "^3.0.0",

[jumpapex]

finally, I got it resolved(but not know the reason :) ).

for quasar, it need a file src/stores/index.js to do pinia initialization

import { store } from 'quasar/wrappers'
import { createPinia } from 'pinia'

/*
 * If not building with SSR mode, you can
 * directly export the Store instantiation;
 *
 * The function below can be async too; either use
 * async/await or return a Promise which resolves
 * with the Store instance.
 */

export default store((/* { ssrContext } */) => {
  const pinia = createPinia()

  // You can add Pinia plugins here
  // pinia.use(SomePiniaPlugin)

  return pinia
})

(https://quasar.dev/quasar-cli-vite/state-management-with-pinia/)

But it is still puzzled that why the data is retrieved successfully with the warning "$pinia" is not defined.

[posva]

Well, you need to install pinia as a plugin (https://pinia.vuejs.org/getting-started.html). That is probably the way Quasar does it.

[Carl4]

I had a similar error, but had installed pinia as a plugin. But apparently the order of app.add({library}) calls matters.

I had been using

vueApp.add(pinia);
vueApp.add(router);
vueApp.mount("#app");

Switching the order of router and pinia seemed to resolve the warnings. to:

vueApp.add(router);
vueApp.add(pinia);
vueApp.mount("#app");