feat: preserving state between route changes (#132)

composables/lifecycle.ts

@@ -0,0 +1,30 @@
+import type { ComponentInternalInstance } from 'vue'
+import { onActivated, onDeactivated, ref } from 'vue'
+
+/**
+ * ### Whether the current component is running in the background
+ *
+ * for handling problems caused by the keepalive function
+ */
+export function useDeactivated() {
+  const deactivated = ref(false)
+  onActivated(() => deactivated.value = false)
+  onDeactivated(() => deactivated.value = true)
+
+  return deactivated
+}
+
+/**
+ * ### When the component is restored from the background
+ *
+ * for handling problems caused by the keepalive function
+ */
+export function onReactivated(hook: Function, target?: ComponentInternalInstance | null): void {
+  const initial = ref(true)
+  onActivated(() => {
+    if (initial.value)
+      return
+    hook()
+  }, target)
+  onDeactivated(() => initial.value = false)
+}

composables/paginator.ts

@@ -1,4 +1,5 @@
 import type { Paginator } from 'masto'
+import { useDeactivated } from './lifecycle'
 import type { PaginatorState } from '~/types'
 
 export function usePaginator<T>(paginator: Paginator<any, T[]>) {
@@ -10,6 +11,7 @@ export function usePaginator<T>(paginator: Paginator<any, T[]>) {
   const bound = reactive(useElementBounding(endAnchor))
   const isInScreen = $computed(() => bound.top < window.innerHeight * 2)
   const error = ref<unknown | undefined>()
+  const deactivated = useDeactivated()
 
   async function loadNext() {
     if (state.value !== 'idle')
@@ -44,7 +46,12 @@ export function usePaginator<T>(paginator: Paginator<any, T[]>) {
   watch(
     () => isInScreen,
     () => {
-      if (isInScreen && state.value === 'idle')
+      if (
+        isInScreen
+        && state.value === 'idle'
+        // No new content is loaded when the keepAlive page enters the background
+        && deactivated.value === false
+      )
         loadNext()
     },
     { immediate: true },

nuxt.config.ts

@@ -53,4 +53,7 @@ export default defineNuxtConfig({
       translateApi: '',
     },
   },
+  app: {
+    keepalive: true,
+  },
 })

pages/@[account]/[status].vue

@@ -2,12 +2,12 @@
 import type { ComponentPublicInstance } from 'vue'
 
 const route = useRoute()
-const id = $computed(() => route.params.status as string)
+const id = $(computedEager(() => route.params.status as string))
 const main = ref<ComponentPublicInstance | null>(null)
 let bottomSpace = $ref(0)
 
-const status = window.history.state?.status ?? await fetchStatus(id)
+const { data: status, refresh: refreshStatus } = useAsyncData(async () => window.history.state?.status ?? await fetchStatus(id))
-const { data: context, pending } = useAsyncData(`context:${id}`, () => useMasto().statuses.fetchContext(id))
+const { data: context, pending, refresh: refreshContext } = useAsyncData(`context:${id}`, () => useMasto().statuses.fetchContext(id))
 
 function scrollTo() {
   const statusElement = unrefElement(main)
@@ -27,6 +27,13 @@ if (pending) {
     scrollTo()
   })
 }
+
+onReactivated(() => {
+  // Silently update data when reentering the page
+  // The user will see the previous content first, and any changes will be updated to the UI when the request is completed
+  refreshStatus()
+  refreshContext()
+})
 </script>
 
 <template>

pages/@[account]/index.vue

@@ -1,14 +1,20 @@
 <script setup lang="ts">
 const params = useRoute().params
-const accountName = $computed(() => toShortHandle(params.account as string))
+const accountName = $(computedEager(() => toShortHandle(params.account as string)))
 
-const account = await fetchAccountByName(accountName).catch(() => null)
+const { data: account, refresh } = $(await useAsyncData(() => fetchAccountByName(accountName).catch(() => null)))
 
 if (account) {
   useHead({
     title: () => `${getDisplayName(account)} (@${account.acct})`,
   })
 }
+
+onReactivated(() => {
+  // Silently update data when reentering the page
+  // The user will see the previous content first, and any changes will be updated to the UI when the request is completed
+  refresh()
+})
 </script>
 
 <template>

pages/@[account]/index/followers.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 const params = useRoute().params
-const accountName = $computed(() => params.account as string)
+const accountName = $(computedEager(() => params.account as string))
 
 const account = await fetchAccountByName(accountName)
 const paginator = account ? useMasto().accounts.getFollowersIterable(account.id, {}) : null

pages/@[account]/index/following.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 const params = useRoute().params
-const accountName = $computed(() => params.account as string)
+const accountName = $(computedEager(() => params.account as string))
 
 const account = await fetchAccountByName(accountName)
 const paginator = account ? useMasto().accounts.getFollowingIterable(account.id, {}) : null

pages/@[account]/index/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 const params = useRoute().params
-const accountName = $computed(() => params.account as string)
+const accountName = $(computedEager(() => params.account as string))
 
 const account = await fetchAccountByName(accountName)
 const tabNames = ['Posts', 'Posts & replies', 'Media'] as const

pages/tags/[tag].vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 const params = useRoute().params
-const tag = $computed(() => params.tag as string)
+const tag = $(computedEager(() => params.tag as string))
 
 const paginator = useMasto().timelines.getHashtagIterable(tag)