feat: reset state when switching routes

Author: jeffydc

src/store.js

@@ -41,9 +41,7 @@ export const store = reactive({
   code: {},
   config: {
     template: '',
-    include_test: false,
-    output_dir: './logs',
-    log_every_iters: 2
+    include_test: false
   }
 })
 
@@ -62,7 +60,7 @@ export function saveConfig(key, value) {
 // render the code if there are fetched files for current selected template
 export function genCode() {
   const currentFiles = files[store.config.template]
-  store.code = {}
+  store.code = {} // empty the `store.code` after changing templates
   if (currentFiles && Object.keys(currentFiles).length) {
     for (const file in currentFiles) {
       if (!store.config.include_test && file === 'test_all.py') {

src/views/Create.vue

@@ -19,6 +19,8 @@ import SplitPane from '../components/PaneSplit.vue'
 import PaneRight from '../components/PaneRight.vue'
 import PaneLeft from '../components/PaneLeft.vue'
 import Footer from '../components/Footer.vue'
+import { onUnmounted } from 'vue'
+import { store } from '../store'
 
 export default {
   components: {
@@ -27,6 +29,22 @@ export default {
     PaneRight,
     PaneLeft,
     Footer
+  },
+  setup() {
+    onUnmounted(() => {
+      // delete each property of config
+      // since `store.config` is being watched in store.js
+      // and Vue watch function does not tracked
+      // if we reassign `store.config` (i.e. store.config = {})
+      for (const config in store.config) {
+        delete store.config[config]
+      }
+      // since we delete each property,
+      // it is better to reassign the initial values
+      // which are defined in store.js
+      store.config.template = ''
+      store.config.include_test = false
+    })
   }
 }
 </script>