How to Use Pinia Store in Vue Component: Simple Guide

To use a Pinia store in a Vue component, first import the store and then call it inside the component setup function using const store = useStore(). You can then access or modify the store's state and actions directly through this store object.

Syntax

Here is the basic syntax to use a Pinia store inside a Vue component's setup() function:

• import { useStore } from '@/stores/storeFile': Import the store function.
• const store = useStore(): Call the store function to get the store instance.
• Access state with store.stateProperty and call actions with store.actionName().

javascript

import { defineComponent } from 'vue'
import { useStore } from '@/stores/counter'

export default defineComponent({
  setup() {
    const store = useStore()
    // Access state: store.count
    // Call action: store.increment()
    return { store }
  }
})

Example

This example shows a simple counter store used inside a Vue component. The component displays the count and has a button to increase it.

vue

/* stores/counter.js */
import { defineStore } from 'pinia'

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

/* components/CounterComponent.vue */
<template>
  <div>
    <p>Count: {{ store.count }}</p>
    <button @click="store.increment">Increase</button>
  </div>
</template>

<script setup>
import { useCounterStore } from '@/stores/counter'
const store = useCounterStore()
</script>

Output

Count: 0
[Button labeled 'Increase']

Clicking the button increases the count number by 1 each time.

Common Pitfalls

• Forgetting to call the store function inside setup() and using the import directly.
• Not returning the store or its properties from setup(), so the template cannot access them.
• Using Pinia stores outside of a Pinia plugin or without installing Pinia in the Vue app.

javascript

/* Wrong: Using store import directly without calling it */
import { useCounterStore } from '@/stores/counter'

export default {
  setup() {
    // This is wrong, useCounterStore is a function
    const store = useCounterStore
    return { store }
  }
}

/* Right: Call the store function */
import { useCounterStore } from '@/stores/counter'

export default {
  setup() {
    const store = useCounterStore()
    return { store }
  }
}

Quick Reference

Remember these quick tips when using Pinia stores in components:

• Always call the store function inside setup().
• Return the store or needed properties to use them in the template.
• Install Pinia plugin in your Vue app before using stores.
• Use store.stateProperty to read state and store.action() to modify it.

Key Takeaways

Import and call your Pinia store function inside the component's setup() to use it.

Access state and actions through the returned store object in your template or script.

Always install Pinia plugin in your Vue app before using stores.

Return the store or its properties from setup() for template access.

Avoid using the store import directly without calling it as a function.