switching to composition API

src/components/MenuReset.vue

@@ -1,13 +1,19 @@
+<script setup>
+  import { globalStore } from "../stores/index.js";
+
+  const store = globalStore();
+</script>
+
 <template>
   <div class="form-field">
     <div class="form-field">
       <label>
         Loop
         <input
-          :value="loop"
+          :value="store.loop"
           type="checkbox"
-          :checked="loop"
-          @input="toggleLoop()"
+          :checked="store.loop"
+          @input="store.toggleLoop()"
         />
       </label>
     </div>
@@ -16,43 +22,25 @@
       name="next"
       class="next"
       value="Next"
-      @click="toggleNext()"
+      @click="store.toggleNext()"
     />
     <input
       type="button"
       name="stop"
       class="stop"
       value="stop"
-      @click="toggleStop()"
+      @click="store.toggleStop()"
     />
     <input
       type="button"
       name="reset"
       class="reset"
       value="reset"
-      @click="toggleReset()"
+      @click="store.toggleReset()"
     />
   </div>
 </template>
-<script>
-  import { mapState, mapActions } from "pinia";
-  import { globalStore } from "../stores/index.js";
 
-  export default {
-    name: "MenuReset",
-    computed: {
-      ...mapState(globalStore, ["loop"]),
-    },
-    methods: {
-      ...mapActions(globalStore, [
-        "toggleReset",
-        "toggleStop",
-        "toggleLoop",
-        "toggleNext",
-      ]),
-    },
-  };
-</script>
 <style scoped>
   .form-field {
     display: flex;