feat(persist-data): storing data in store to redisplay when clicked on back button

Author: technikhil314

pages/index.vue

@@ -22,17 +22,16 @@
                 type="text"
                 class="flex-1 flex-grow-0 w-full bg-transparent rounded-md"
                 placeholder="Add label to this text block"
-                value="Original Text"
+                :value="lhsLabel"
               />
-              <span class="sr-only"
-                >Add label to this original text bloack</span
-              >
+              <span class="sr-only">Add label to this original text block</span>
             </label>
             <textarea
               id="lhs"
               rows="28"
               name="lhs"
               class="flex-1 w-full bg-transparent rounded-md resize-none  form-textarea"
+              v-html="lhs"
             ></textarea>
           </div>
           <div class="flex flex-col w-1/2 gap-4">
@@ -43,18 +42,18 @@
                 type="text"
                 class="flex-1 flex-grow-0 w-full bg-transparent rounded-md"
                 placeholder="Add label to this text block"
-                value="Changed text"
+                :value="rhsLabel"
               />
-              <span class="sr-only"
-                >Add label to this original text bloack</span
-              >
+              <span class="sr-only">Add label to this changed text block</span>
             </label>
             <textarea
               id="rhs"
               rows="28"
               name="rhs"
               class="flex-1 w-full bg-transparent rounded-md resize-none  form-textarea"
-            ></textarea>
+              v-html="rhs"
+            >
+            </textarea>
           </div>
         </section>
         <div class="self-end flex-grow-0 w-full text-center">
@@ -82,6 +81,7 @@ export default Vue.extend({
     return {
       isDarkMode: this.$isDarkMode,
       isSkipTutorial: this.$isSkipTutorial,
+      ...this.$store.state.data,
     }
   },
   async mounted() {
@@ -125,31 +125,17 @@ export default Vue.extend({
       const lhsLabel = formData.get('lhsLabel')
       const rhsLabel = formData.get('rhsLabel')
       if (!lhs || !rhs) {
-        this.$store.commit('toast/show', {
-          show: true,
-          content: 'Please enter some data on both sides to compare',
-          iconHTML: `
-            <svg
-              class="w-6 h-6"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
-              ></path>
-            </svg>
-          `,
-          theme: 'error',
-        })
+        this.showError()
         return
       }
       const originalLhs = lhs
       const originalRhs = rhs
+      this.$store.commit('data/set', {
+        lhs,
+        rhs,
+        lhsLabel,
+        rhsLabel,
+      })
       const diff = dmp.diff_main(originalLhs, originalRhs)
       const gzip = Buffer.from(
         pako.gzip(
@@ -165,6 +151,29 @@ export default Vue.extend({
         hash: `#${doUrlSafeBase64(gzip)}`,
       })
     },
+    showError() {
+      this.$store.commit('toast/show', {
+        show: true,
+        content: 'Please enter some data on both sides to compare',
+        iconHTML: `
+            <svg
+              class="w-6 h-6"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+              ></path>
+            </svg>
+          `,
+        theme: 'error',
+      })
+    },
   },
 })
 </script>

store/data.ts

@@ -0,0 +1,25 @@
+import { GetterTree, MutationTree } from 'vuex/types'
+
+export const state = () => ({
+  lhs: '',
+  rhs: '',
+  lhsLabel: 'Original Text',
+  rhsLabel: 'Changed Text',
+})
+
+export type DataState = ReturnType<typeof state>
+
+export const getters: GetterTree<DataState, DataState> = {
+  get: (state) => ({
+    ...state,
+  }),
+}
+
+export const mutations: MutationTree<DataState> = {
+  set(state, { lhs, rhs, rhsLabel, lhsLabel }: DataState) {
+    state.lhs = lhs
+    state.rhs = rhs
+    state.lhsLabel = lhsLabel
+    state.rhsLabel = rhsLabel
+  },
+}