useStore is not a function error from Pinia

Question

I tried to find a solution to

(0 , pinia__WEBPACK_IMPORTED_MODULE_1__.useStore) is not a function

but found nothing. What am I doing wrong?

This is my store.js code

import { defineStore } from "pinia";

export const myStore = defineStore("myStore", {
  state: () => ({
    count: 0,
    message: "Hello, Pinia!",
  }),
  actions: {
    increment() {
      this.count++;
    },
    updateMessage(newMessage) {
      this.message = newMessage;
    },
  },
});

And this is my App.vue code:

<template>
  <div>
    <p>Count: {{ store.count }}</p>
    <button @click="store.increment">Increment</button>
  </div>
</template>

<script>
import { defineComponent } from "vue";
import { useStore } from "pinia";

export default defineComponent({
  setup() {
    const store = useStore("myStore");

    return {
      store,
    };
  },
});
</script>

Answer 1

useStore is not a function from Pinia. This should be removed:

import { useStore } from "pinia";

When the docs mention creating a useStore function, that function is whatever you export from your store.js code. In your case it's myStore, though by convention it should be useMyStore

export const useMyStore = defineStore("myStore", { ... })

Then you import where needed

import { useMyStore } from 'store.js'

const store = useMyStore()