Pinia

// stores/counter.ts
import { defineStore } from 'pinia';
import { ref, computed } from 'vue';

export const useCounterStore = defineStore('counter', () => {
  // State
  const count = ref(0);
  
  // Getters
  const doubled = computed(() => count.value * 2);
  
  // Actions
  function increment() {
    count.value++;
  }

  async function fetchCount() {
    const response = await fetch('/api/counter');
    count.value = await response.json();
  }

  return { count, doubled, increment, fetchCount };
});

// Option API style
export const useCartStore = defineStore('cart', {
  state: () => ({
    items: [] as CartItem[],
  }),
  getters: {
    totalPrice: (state) => state.items.reduce((sum, item) => sum + item.price, 0),
  },
  actions: {
    addItem(item: CartItem) {
      this.items.push(item);
    },
  },
});

//.vue component
<template>
  <div>
    <p>العدد: {{ counter.count }}</p>
    <p>المضاعف: {{ counter.doubled }}</p>
    <button @click="counter.increment">زيادة</button>
  </div>
</template>

<script setup lang="ts">
import { useCounterStore } from '@/stores/counter';
import { storeToRefs } from 'pinia';

const counter = useCounterStore();
// With storeToRefs for reactivity
const { count, doubled } = storeToRefs(counter);
</script>