how to use pinia in vue?

[johnphilipdev]

I have a vue project and need to implement pinia, how to do it?

[joelgenaro]

Hi, here is my solution for that:

import { createPinia } from 'pinia';

const pinia = createPinia();

export const useStore = pinia.createStore({
state: () => ({
count: 0,
}),
actions: {
increment() {
this.count++;
},
},
});

import { createApp } from 'vue';
import { pinia } from './store';

const app = createApp(App);
app.use(pinia);
app.mount('#app');

Count: {{ count }}

Increment

<script> import { defineComponent } from 'vue'; import { useStore } from './store'; export default defineComponent({ setup() { const store = useStore(); return { count: store.count, increment: store.increment, }; }, }); </script>

[Limzen]

To implement Pinia in a Vue project, you can follow these steps:

1. Install Pinia:
   Run the following command in your project folder:

   npm install pinia

2. Set up Pinia in your main.js:
   In the main entry file (usually main.js or main.ts), import Pinia and set it up with Vue:

   import { createApp } from 'vue';
   import { createPinia } from 'pinia';
   import App from './App.vue';
   
   const app = createApp(App);
   const pinia = createPinia();
   
   app.use(pinia);
   app.mount('#app');

3. Create a Store:
   In a stores directory (e.g., src/stores), create a new file for your store (e.g., counterStore.js):

   import { defineStore } from 'pinia';
   
   export const useCounterStore = defineStore('counter', {
     state: () => ({
       count: 0,
     }),
     actions: {
       increment() {
         this.count++;
       },
     },
   });

4. Use the Store in Components:
   Import and use the store in your components:

   <script setup>
   import { useCounterStore } from '@/stores/counterStore';
   
   const counterStore = useCounterStore();
   </script>
   
   <template>
     <div>
       <p>Count: {{ counterStore.count }}</p>
       <button @click="counterStore.increment">Increment</button>
     </div>
   </template>

This will create a basic setup for using Pinia in Vue 3. You can extend it by adding more stores, state properties, actions, and getters as needed.