Pinia with vue-router problem (Uncaught (in promise) TypeError: useStore is not a function)

[blauwhelm]

Hi,

I'm running into an issue when trying to use pinia with vue-router. It looks like pinia isn't initialized yet when a certain component is loaded via vue-router. I'm probably doing something silly, but I can't see what. Hopefully someone can help me!

package.json

"vue": "^3.1.0-0",
"vue-router": "^4.0.15",
"pinia": "^2.0.14",

main.js

import App from "./App.vue";
import { createApp } from "vue";
import { createPinia } from "pinia";
import { createRouter, createWebHashHistory } from "vue-router";
import Foo from "./views/Foo.vue";

const pinia = createPinia();
const app = createApp(App);
app.use(pinia);

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: "/",
      component: Foo,
    },
  ],
});

app.use(router);

app.mount("#app");

App.vue

<template>
  <div class="scope-app" id="app">
    <router-view />
  </div>
</template>

<script>
import { mapState } from "pinia";
import { useMainStore } from "@/stores/test";

export default {
  computed: {
    ...mapState(useMainStore, ["foo"]),
  },
  mounted() {
    console.log(this.foo);
  },
};
</script>

Foo.vue

<template>
  <div></div>
</template>

<script>
import { mapState } from "pinia";
import { useMainStore } from "../stores/test";

export default {
  computed: {
    ...mapState(useMainStore, ["foo"]),
  },
  mounted() {
    console.log(this.foo);
  },
};
</script>

test.js (store)

import { defineStore } from "pinia";

const getDefaultState = () => {
  return {
    foo: "bar",
  };
};

export const useMainStore = defineStore("main", {
  state: getDefaultState,
});

I'm getting the error

Uncaught (in promise) TypeError: useStore is not a function

And 1 console log with "bar". The App.vue is working, the Foo.vue is not (which is loaded via vue-router). Expected behaviour is that both components log "bar". There seems to be a problem with the order in which things are loaded. Hopefully you can help, thanks!

[Lilja]

Made a repo of this to try to reproduce. Couldn't.

[blauwhelm]

Thanks for looking into this!

I'm not sure what has happened when I tested it, but when I test my own code now it does work. It almost looks like a caching thing to me. I was dabbling with some code that was giving this error and was trying to reproduce a minimal state where this error occurred. This state hasn't changed, but somehow the error disappeared.

Anyhow, it works now :)

[AwaisSikander]

const users = defineStore('users', {
state,
getters,
actions,
})

Some Times Using Same Name For 2 Stores cause this issue

[AwaisSikander]

I used same users name 2 times

[KKrisu]

same issue happened to me, thanks @AwaisSikander 🙏

[KKrisu]

The error message could have been more helpful in such a case 🙄