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>
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()