How can I use Pinia with TypeScript in my Vue 3 application?

How can I use Pinia with TypeScript in my Vue 3 application?

To use Pinia with TypeScript, first install Pinia and then create a store using the defineStore function.

Can you show me a simple example of a store?

Sure! Here's a basic example:

import { defineStore } from 'pinia';

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

How do I use this store in a component?

You can use the store in your component like this:

import { defineComponent } from 'vue';
import { useCounterStore } from './stores/counter';

export default defineComponent({
  setup() {
    const counter = useCounterStore();
    return { counter };
  }
});

What about TypeScript types for the state?

You can define types for your state by specifying a type for the state function:

interface CounterState {
  count: number;
}

export const useCounterStore = defineStore<'counter', CounterState>('counter', {
  state: () => ({ count: 0 }),
  actions: { ... }
});