feat: preserving state between route changes (#132)

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: context, pending } = useAsyncData(`context:${id}`, () => useMasto().statuses.fetchContext(id))
+const { data: status, refresh: refreshStatus } = useAsyncData(async () => window.history.state?.status ?? await fetchStatus(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