How do you use Pinia stores in components?

Call the store's use...Store() function inside the component's setup, and use the returned store directly. State, getters and actions are all properties on it.

import { useCounterStore } from '@/stores/counter'
export default {
  setup() {
    const counter = useCounterStore()
    return {
      counter
    }
  }
}

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

With <script setup>, you skip the return. Calling useCounterStore() at the top level is enough. The store is created the first time a component calls it.

To destructure the store and keep reactivity, use storeToRefs():

import { storeToRefs } from 'pinia'
const counter = useCounterStore()
const { count, double } = storeToRefs(counter)
const { increment } = counter

The store is wrapped in reactive, so plain destructuring such as const { count } = counter breaks reactivity. storeToRefs() creates a ref for each state property and getter, so destructured values stay in sync. Actions are bound to the store, so you destructure them directly.

Options API components can use the map helpers instead: mapState(), mapActions() and mapStores().