Vue.js: How to implement state management with Pinia in Vue?

1npm install pinia

1// stores/counter.ts
2import { defineStore } from "pinia"
3import { ref, computed } from "vue"
4
5export const useCounterStore = defineStore("counter", () => {
6  const count = ref(0)
7  const doubled = computed(() => count.value * 2)
8
9  function increment() {
10    count.value++
11  }
12
13  async function fetchAndIncrement() {
14    await api.increment()
15    count.value++
16  }
17
18  return { count, doubled, increment, fetchAndIncrement }
19})

1<script setup>
2import { useCounterStore } from "@/stores/counter"
3import { storeToRefs } from "pinia"
4
5const counter = useCounterStore()
6const { count, doubled } = storeToRefs(counter) // reactive
7</script>
8
9<template>
10  <p>Count: {{ count }}</p>
11  <p>Doubled: {{ doubled }}</p>
12  <button @click="counter.increment()">+1</button>
13</template>