Learn Vue 3: Step by Step, Episode 24 - Direct Mutation Concerns

counterStore.js

import { reactive } from "vue";

export let counter = reactive({
  // state
  count: 0,

  // action
  increment() {
    if (this.count >= 10) {
      return;
    }

    this.count++;
  }
});

CounterView.vue

<script setup>
import {counter} from "@/stores/counterStore";
</script>

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

    <button @click="counter.increment()">Increment</button>
  </div>
</template>