diff --git a/client/src/hooks/useUniversalFetch.ts b/client/src/hooks/useUniversalFetch.ts index bdcae57..a1392a9 100644 --- a/client/src/hooks/useUniversalFetch.ts +++ b/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 + fetch: (store: Store) => any | Promise ) { - 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 diff --git a/client/src/main.ts b/client/src/main.ts index 086b1fc..22679d3 100644 --- a/client/src/main.ts +++ b/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,7 +14,12 @@ export default viteSSR( App, { routes }, async ({ app, initialState, router }) => { + NProgressPlugin(router) + + app.use(i18n) + const store = createStore() + app.use(store) const r: Router = router @@ -22,33 +27,15 @@ export default viteSSR( 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 } ) diff --git a/client/src/pages/archives.vue b/client/src/pages/archives.vue index 578e616..4e88a56 100644 --- a/client/src/pages/archives.vue +++ b/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() }, diff --git a/client/src/pages/post/index.vue b/client/src/pages/post/index.vue index e1970ee..b0ab496 100644 --- a/client/src/pages/post/index.vue +++ b/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() }, diff --git a/client/src/utils/index.ts b/client/src/utils/index.ts index 6f6399d..6268a50 100644 --- a/client/src/utils/index.ts +++ b/client/src/utils/index.ts @@ -1,5 +1,3 @@ -export * from './sharedData' - export const isSSR = import.meta.env.SSR export function sleep(ms = 1000) { diff --git a/client/src/utils/sharedData.ts b/client/src/utils/sharedData.ts deleted file mode 100644 index d3a5a3b..0000000 --- a/client/src/utils/sharedData.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { Store } from 'vuex' -import { ISiteState } from '../store' - -export const sharedData: Record = {} - -export function useSharedStore() { - return sharedData.$store as Store -} diff --git a/client/src/vue.d.ts b/client/src/vue.d.ts index aa48e77..e56fcd1 100644 --- a/client/src/vue.d.ts +++ b/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'] } }