fix: missing store when render at server side

client/src/hooks/useUniversalFetch.ts

@@ -1,4 +1,7 @@
 import { RouteLocationNormalizedLoaded, useRoute } from 'vue-router'
+import { Store } from 'vuex'
+import { ISiteState } from '~/store'
+import { isSSR } from '~/utils'
 
 interface IUniversalFetchData {
   data?: any
@@ -7,19 +10,26 @@ interface IUniversalFetchData {
 
 export async function useUniversalFetch(
   to: RouteLocationNormalizedLoaded,
-  fetch: () => any | Promise<any>
+  fetch: (store: Store<ISiteState>) => any | Promise<any>
 ) {
-  const state: IUniversalFetchData | null = to.meta.state as any
+  const meta = to.meta as any
+  const state: IUniversalFetchData | null = meta.state
 
-  if (state?.data && !state?.__used) {
-    state.__used = true
-    return state.data
+  const isFetchedInServerSide = !!(state?.data && !state?.__used)
+
+  if (isFetchedInServerSide) {
+    state!.__used = true
+    return state!.data
   }
 
-  const data = await fetch()
+  // todo: test
+  const store = meta.store
+
+  const data = await fetch(store)
+
   to.meta.state = {
     data,
-    __used: false,
+    __used: !isSSR,
   }
 
   return data

client/src/main.ts

@@ -3,9 +3,9 @@ import './style/app.css'
 import viteSSR from 'vite-ssr'
 import routes from 'voie-pages'
 import { i18n } from 'vite-i18n-plugin'
-import { useI18n } from 'vue-i18n'
+// import { useI18n } from 'vue-i18n'
 import { createStore } from './store'
-import { isSSR, sharedData } from './utils'
+import { isSSR } from './utils'
 import App from './App.vue' // Vue or React main app
 import { Router } from 'vue-router'
 import { NProgressPlugin } from './plugins'
@@ -14,41 +14,28 @@ export default viteSSR(
   App,
   { routes },
   async ({ app, initialState, router }) => {
+    NProgressPlugin(router)
+
+    app.use(i18n)
+
     const store = createStore()
+    app.use(store)
 
     const r: Router = router
 
     if (isSSR) {
       await store.dispatch('serverInit')
       initialState.storeState = store.state
     } else {
-      // console.log('routes', routes)
       store.replaceState(initialState.storeState)
+      // sync data that fetched in `beforeRouteEnter`
       r.currentRoute.value.meta.state = initialState.state
     }
 
-    NProgressPlugin(router)
-
-    app.use(i18n)
-
-    Object.defineProperty(app.config.globalProperties, 't', {
-      get: () => {
-        const { t } = useI18n()
-        return t
-      },
-    })
-
-    Object.defineProperty(app.config.globalProperties, 'locale', {
-      get: () => {
-        const { locale } = useI18n()
-        return locale
-      },
+    // provide app/store context for `beforeRouteEnter` hook
+    r.beforeEach((to) => {
+      to.meta.app = app
+      to.meta.store = store
     })
-
-    app.use(store)
-
-    sharedData.$store = store
-    sharedData.$app = app
-    sharedData.$router = router
   }
 )

client/src/pages/archives.vue

@@ -25,13 +25,10 @@
 import { computed, defineComponent } from 'vue'
 import { useUniversalFetch } from '../hooks'
 import { useStore } from '../store'
-import { useSharedStore } from '../utils'
 
 export default defineComponent({
   async beforeRouteEnter(to, _, next) {
-    const store = useSharedStore()
-
-    await useUniversalFetch(to, () => store.dispatch('fetchArchives'))
+    await useUniversalFetch(to, (store) => store.dispatch('fetchArchives'))
 
     next()
   },

client/src/pages/post/index.vue

@@ -34,19 +34,17 @@ import { computed, defineComponent } from 'vue'
 import { useRoute } from 'vue-router'
 import { useUniversalFetch } from '../../hooks'
 import { useStore } from '../../store'
-import { useSharedStore } from '../../utils'
 
 export default defineComponent({
   async beforeRouteEnter(to, _from, next) {
-    await useUniversalFetch(to, async () => {
-      const store = useSharedStore()
+    await useUniversalFetch(to, async (store) => {
       await store.dispatch('fetchPost', to.query)
     })
 
     next()
   },
   async beforeRouteUpdate(to, _from, next) {
-    const store = useSharedStore()
+    const store = useStore()
     await store.dispatch('fetchPost', to.query)
     next()
   },

client/src/utils/index.ts

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

client/src/vue.d.ts

@@ -1,8 +1,8 @@
 import { Composer } from 'vue-i18n'
 
 declare module '@vue/runtime-core' {
-  // provide typings for `this.t`
   interface ComponentCustomProperties {
+    // i18n plugin
     t: Composer['t']
   }
 }