hidekatsu-izuno / vue-history-state

History State Module for Vue3 and Nuxt3
MIT License
15 stars 0 forks source link

How to use? #1

Closed AlejandroAkbal closed 1 year ago

AlejandroAkbal commented 1 year ago

Can you please put an example repo / codeblitz

Because I am having a hard time using this project, which I really need

AlejandroAkbal commented 1 year ago

Context: this a bit of the code that I'm trying to use

<script lang="ts" setup>
 // ...

  const historyState = useHistoryState()

  // ...

  const {
    data: initialPostPages,
    pending: pendingInitialPosts,
    error: errorInitialPosts,
    refresh: refreshInitialPosts
  } = await useAsyncData(
    'posts',
    () => {
      const apiUrl = config.public.API_URL + '/booru/' + selectedBooru.value.type.type + '/posts'

      const tags = selectedTags.value.map((tag) => tag.name).join('|')

      return $fetch<IPostPage>(apiUrl, {
        params: {
          baseEndpoint: selectedBooru.value.domain,

          limit: userSettings.postsPerPage,

          pageID: selectedPage.value,

          tags: tags.length > 0 ? tags : undefined,

          // Filters
          rating: selectedFilters.value.rating,
          order: selectedFilters.value.sort,
          score: selectedFilters.value.score
        },

        retry: 0
      })
    },

    {
      server: false,

      lazy: true,

      default: () => historyState.data,

      immediate: !historyState.data,

      transform: (data) => {
        return [data]
      }
    }
  )

  onBackupState(() => initialPostPages)

</script>
AlejandroAkbal commented 1 year ago

I would really appreciate your help @hidekatsu-izuno

AlejandroAkbal commented 1 year ago

Bump

AlejandroAkbal commented 1 year ago

Bump

hidekatsu-izuno commented 1 year ago

I added useRestorableState as a new SSR-friendly API on v0.14.0. It might help you. https://www.npmjs.com/package/vue-history-state#user-content-new-ssr-friendly-reactivity-apis-experimental