feat: reset stores (#62)

components/TheHeader.vue

@@ -2,8 +2,9 @@
 import { ref } from "vue";
 import { storeToRefs } from "pinia";
 import {
-  ArrowUpOnSquareIcon,
   ArrowDownOnSquareIcon,
+  ArrowUpOnSquareIcon,
+  ArrowPathIcon,
 } from "@heroicons/vue/24/outline";
 import { useEditorStore } from "@/stores/editor";
 import { useLetterStore } from "@/stores/letter";
@@ -20,9 +21,12 @@ const { documentType, zoomLevel } = storeToRefs(useEditorStore());
 
 const { template } = storeToRefs(useProfileStore());
 
-const profile = storeToRefs(useProfileStore());
-const letter = storeToRefs(useLetterStore());
-const resume = storeToRefs(useResumeStore());
+const profileStore = useProfileStore();
+const profile = storeToRefs(profileStore);
+const letterStore = useLetterStore();
+const letter = storeToRefs(letterStore);
+const resumeStore = useResumeStore();
+const resume = storeToRefs(resumeStore);
 
 const isImportError = ref(false);
 
@@ -93,6 +97,12 @@ function importFromJson(event: Event) {
     isImportError.value = true;
   }
 }
+
+function resetStores() {
+  profileStore.$reset();
+  letterStore.$reset();
+  resumeStore.$reset();
+}
 </script>
 
 <template>
@@ -110,6 +120,13 @@ function importFromJson(event: Event) {
       </h1>
     </NuxtLink>
     <div class="flex items-end gap-8 h-[60%]">
+      <button
+        class="text-blue-500 flex items-center gap-1"
+        @click="resetStores"
+      >
+        <ArrowPathIcon class="h-6" />
+        Reset
+      </button>
       <div>
         <label
           for="editorFileReader"

stores/letter.ts

@@ -1,20 +1,13 @@
-import { ref } from "vue";
 import { defineStore } from "pinia";
 
-// @ts-expect-error - TS error with "state: () => {}" syntax
+// Use option API to take advantage of automatic persistence
+// @ts-expect-error - TS does not handle option API syntax
 export const useLetterStore = defineStore("letter", {
-  state: () => {
-    const recipientDetails = ref<string[]>([]);
-    const subject = ref("");
-    const reference = ref("");
-    const paragraphs = ref<string[]>([]);
-
-    return {
-      paragraphs,
-      recipientDetails,
-      reference,
-      subject,
-    };
-  },
+  state: () => ({
+    paragraphs: [] as string[],
+    recipientDetails: [] as string[],
+    reference: "",
+    subject: "",
+  }),
   persist: true,
 });

stores/profile.ts

@@ -1,26 +1,16 @@
-import { ref } from "vue";
 import { defineStore } from "pinia";
 import type { Template } from "@/types";
 import { templateColors, templates } from "@/globals";
 
-// @ts-expect-error - TS error with "state: () => {}" syntax
+// Use option API to take advantage of automatic persistence
+// @ts-expect-error - TS does not handle option API syntax
 export const useProfileStore = defineStore("profile", {
-  state: () => {
-    const template = ref<Template>(templates[0]);
-
-    const name = ref("");
-    const title = ref("");
-
-    const isThemeCustomized = ref(false);
-    const colors = ref(templateColors[template.value]);
-
-    return {
-      colors,
-      isThemeCustomized,
-      name,
-      template,
-      title,
-    };
-  },
+  state: () => ({
+    colors: templateColors[templates[0]],
+    isThemeCustomized: false,
+    name: "",
+    template: templates[0] as Template,
+    title: "",
+  }),
   persist: true,
 });

stores/resume.ts

@@ -1,21 +1,14 @@
-import { ref } from "vue";
 import { defineStore } from "pinia";
 import type { Category, Detail, Link } from "@/types";
 
-// @ts-expect-error - TS error with "state: () => {}" syntax
+// Use option API to take advantage of automatic persistence
+// @ts-expect-error - TS does not handle option API syntax
 export const useResumeStore = defineStore("resume", {
-  state: () => {
-    const about = ref("");
-    const contactDetails = ref<Detail[]>([]);
-    const socialLinks = ref<Link[]>([]);
-    const categories = ref<Category[]>([]);
-
-    return {
-      about,
-      categories,
-      contactDetails,
-      socialLinks,
-    };
-  },
+  state: () => ({
+    about: "",
+    categories: [] as Category[],
+    contactDetails: [] as Detail[],
+    socialLinks: [] as Link[],
+  }),
   persist: true,
 });