Fix route loading, update packages

package.json

@@ -17,10 +17,10 @@
   "dependencies": {
     "@geoman-io/leaflet-geoman-free": "^2.14.2",
     "@nuxt/devalue": "^2.0.0",
-    "axios": "^1.3.5",
+    "axios": "^1.3.6",
     "js-yaml": "^4.1.0",
     "leaflet": "^1.9.3",
-    "pinia": "^2.0.34",
+    "pinia": "^2.0.35",
     "vue": "^3.2.47",
     "vue-router": "^4.1.6"
   },
@@ -33,10 +33,10 @@
     "eslint-plugin-vue": "^9.11.0",
     "express": "^4.18.2",
     "minimist": "^1.2.8",
-    "postcss": "^8.4.22",
+    "postcss": "^8.4.23",
     "sass": "^1.62.0",
     "tailwindcss": "^3.3.1",
-    "vite": "^4.2.1",
+    "vite": "^4.3.0",
     "vite-plugin-md": "^0.21.5",
     "vite-plugin-pages": "^0.29.0"
   }

server.js

@@ -27,11 +27,8 @@ export async function createServer(
     : {}
 
   const app = express()
-
-  /**
-   * @type {import('vite').ViteDevServer}
-   */
   let vite
+
   if (!isProd) {
     vite = await (
       await import('vite')
@@ -42,8 +39,6 @@ export async function createServer(
       server: {
         middlewareMode: true,
         watch: {
-          // During tests we edit the files too fast and sometimes chokidar
-          // misses change events, so enforce polling for consistency
           usePolling: true,
           interval: 100
         },
@@ -77,7 +72,6 @@ export async function createServer(
         render = (await vite.ssrLoadModule('/src/entry-server.js')).render
       } else {
         template = indexProd
-        // @ts-ignore
         render = (await import('./dist/server/entry-server.js')).render
       }
 

src/modules/otus/views/Index.vue

@@ -47,7 +47,7 @@
     <div class="pt-3 pb-4">
       <div class="container mx-auto box-border">
         <router-view
-        v-if="isReady"
+          v-if="isReady"
           :key="route.fullPath"
           :taxon-id="taxon.id"
           :taxon="taxon"
@@ -63,10 +63,9 @@
 <script setup>
 import { ref, watch, onServerPrefetch, computed, onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
+import { useOtuStore } from '../store/store'
 import Breadcrumb from '../components/Breadcrumb/Breadcrumb.vue'
 import TaxaInfo from '../components/TaxaInfo.vue'
-import TaxonWorks from '../services/TaxonWorks'
-import { useOtuStore } from '../store/store'
 //import useChildrenRoutes from '../composables/useChildrenRoutes'
 
 const route = useRoute()
@@ -75,36 +74,35 @@ const routeParams = ref(route.params)
 const tabs = [] // useChildrenRoutes()
 const store = useOtuStore()
 
- router.afterEach((route) => {
+router.afterEach((route) => {
   routeParams.value = route.params
-}) 
+})
 
-const otu = computed(() => store.otu )
-const taxon = computed(() => store.taxon )
+const otu = computed(() => store.otu)
+const taxon = computed(() => store.taxon)
 
 const isReady = computed(() => otu.value?.id && taxon.value?.id)
 
-
-
 onServerPrefetch(async () => {
   await store.loadInit(route.params.id)
 })
 
 watch(
   () => route.fullPath,
-  async (newVal, oldVal) => {
+  async () => {
     store.$reset()
     store.loadInit(route.params.id)
-  },
-) 
+  }
+)
 
 onMounted(() => {
-  if (!store.otu) {
+  if (!otu.value || otu.value.id !== Number(route.params.id)) {
+    store.$reset()
     store.loadInit(route.params.id)
   }
 })
 
-function loadOtu ({ id }) {
+function loadOtu({ id }) {
   router.push({
     name: 'otus-id-overview',
     params: {