feat: use global store object in beforeRouteEnter

client/src/main.ts

@@ -5,7 +5,7 @@ import routes from 'voie-pages'
 import { i18n } from 'vite-i18n-plugin'
 import { useI18n } from 'vue-i18n'
 import { createStore } from './store'
-import { isSSR } from './utils'
+import { isSSR, sharedData } from './utils'
 import App from './App.vue' // Vue or React main app
 import { Router } from 'vue-router'
 
@@ -37,4 +37,8 @@ export default viteSSR(App, { routes }, ({ app, initialState, router }) => {
   })
 
   app.use(store)
+
+  sharedData.$store = store
+  sharedData.$app = app
+  sharedData.$router = router
 })

client/src/pages/archives.vue

@@ -21,27 +21,42 @@
   </div>
 </template>
 
-<script>
-import { mapState } from 'vuex'
+<script lang="ts">
+import { computed, defineComponent } from 'vue'
+import { useUniversalFetch } from '../hooks'
+import { useStore } from '../store'
+import { useSharedStore } from '../utils'
 
-export default {
-  async asyncData({ store }) {
-    await store.dispatch('fetchArchives')
+export default defineComponent({
+  async beforeRouteEnter(to, _, next) {
+    const store = useSharedStore()
+
+    await useUniversalFetch(to, () => store.dispatch('fetchArchives'))
+
+    next()
   },
-  computed: {
-    ...mapState(['user', 'menus', 'archives']),
-    timelineNodes() {
-      const nodes = this.archives.map((node) => {
-        return {
-          title: `${node.year}-${node.month}`,
-          nodes: node.posts,
-        }
-      })
-
-      return nodes
-    },
+  setup() {
+    const { state } = useStore()
+
+    const archives = computed(() => state.archives)
+
+    return {
+      archives,
+      user: computed(() => state.user),
+      menus: computed(() => state.menus),
+      timelineNodes: computed(() => {
+        const nodes = (archives.value || []).map((node) => {
+          return {
+            title: `${node.year}-${node.month}`,
+            nodes: node.posts,
+          }
+        })
+
+        return nodes
+      }),
+    }
   },
-}
+})
 </script>
 
 <style scoped></style>

client/src/utils.ts → client/src/utils/index.ts

@@ -1,3 +1,5 @@
+export * from './sharedData'
+
 export const isSSR = import.meta.env.SSR
 
 export function sleep(ms = 1000) {

client/src/utils/sharedData.ts

@@ -0,0 +1,8 @@
+import { Store } from 'vuex'
+import { ISiteState } from '../store'
+
+export const sharedData: Record<string, any> = {}
+
+export function useSharedStore() {
+  return sharedData.$store as Store<ISiteState>
+}