How do I integrate Vue 3 with TypeScript for state management?

How do I integrate Vue 3 with TypeScript for state management?

To integrate Vue 3 with TypeScript for state management, you can use Vuex or Pinia. Which one would you like to know more about?

I'd like to know more about using Pinia.

Great choice! Pinia is a lightweight state management library for Vue 3. First, install it using npm: npm install pinia. Then, create a store and use it in your Vue app.

Can you show me a simple example of a Pinia store?

Sure! Here's a basic example:

import { defineStore } from 'pinia';

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

You can then use this store in your components!

How do I use this store in a Vue component?

In your component, import the store and use it like this:

<template>
  <button @click="store.increment">Count: {{ store.count }}</button>
</template>

<script setup>
import { useStore } from './path/to/store';
const store = useStore();
</script>