CounterStore.js

import { defineStore } from "pinia";

export let useCounterStore = defineStore('counter', {
  // data
  state() {
    return {
      count: 5
    };
  },

  // methods
  actions: {
    increment() {
      if (this.count < 10) {
        this.count++;
      }
    }
  },

  // computed
  getters: {
    remaining() {
      return 10 - this.count;
    }
  }
});

UsageView.vue

<script setup>
import {useCounterStore} from "@/stores/CounterStore";

let counter = useCounterStore();
</script>

<template>
  <div>
    <h1>{{ counter.count }}</h1>

    <button
      @click="counter.increment()"
      :disabled="! counter.remaining"
    >Increment ({{ counter.remaining }} Remaining)</button>
  </div>
</template>

nice