How to setup Pinia with Vue 3 & Ionic?

Ionic Framework Ionic Vue
1

Hi guys!

Despite the large amount of blog and documentation available for Pinia and Vue 3, I can’t get it to work with Ionic.

I’ve used Pinia with simple Vue 3 applications before and never had a problem. This is the first time I’ve tried to configure Pinia with Ionic.

What I did:

  1. Create a new blank Ionic Vue 3 application
  2. Delete TS according to the documentation
  3. npm i pinia
  4. Add use(createPinia()) to main.js
  5. Define a shop with defineStore() and the setup() method =>{} ).

I can see Pinia in the Vue devtool but not my own store, only root. (see screenshot).

SCR-20230226-uet
SCR-20230226-uet3584×1274 164 KB

Am I missing something obvious?

Translated with DeepL Translate: The world's most accurate translator (free version)

2

Did you import the store and run the use[[storeName]]Store() function?

import useTestStore from "@/stores/TestStore"

const testStore = useTestStore()

console.log(testStore.myValue)
3

Hey Felix,

Yes you’re right, I finally found the issue.

Apparently, you can’t use router.Read().then....

You have to use
const app = createApp(App).use(IonicVue, { mode: 'ios' }).use(router).use(createPinia()); app.mount('#app');

Also, the store is only viewable in the dev tool if you’re on the page it is used.

Thanks!

4