use offset in url query

alex

2025-06-04 7aa80f1c68df586c1bc637c668666d29e84c3de7

use offset in url query

 package-lock.json

@@ -10,6 +10,7 @@
      "dependencies": {
        "@fastify/static": "^8.2.0",
        "@vueuse/core": "^13.3.0",
        "@vueuse/router": "^13.3.0",
        "dotenv": "^16.5.0",
        "fastify": "^5.3.3",
        "lodash": "^4.17.21",
@@ -1906,6 +1907,22 @@
        "url": "https://github.com/sponsors/antfu"
      }
    },
    "node_modules/@vueuse/router": {
      "version": "13.3.0",
      "resolved": "https://registry.npmjs.org/@vueuse/router/-/router-13.3.0.tgz",
      "integrity": "sha512-6pqzHWSZbjFHZ3Uo3x4nykx/b0YfKnkYVoERQs3Is9xJODlO/CTW0LRuEwaQD3kov9TJ6q8ru9MybHZ8DU6mdA==",
      "license": "MIT",
      "dependencies": {
        "@vueuse/shared": "13.3.0"
      },
      "funding": {
        "url": "https://github.com/sponsors/antfu"
      },
      "peerDependencies": {
        "vue": "^3.5.0",
        "vue-router": "^4.0.0"
      }
    },
    "node_modules/@vueuse/shared": {
      "version": "13.3.0",
      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-13.3.0.tgz",

 package.json

@@ -14,6 +14,7 @@
  "dependencies": {
    "@fastify/static": "^8.2.0",
    "@vueuse/core": "^13.3.0",
    "@vueuse/router": "^13.3.0",
    "dotenv": "^16.5.0",
    "fastify": "^5.3.3",
    "lodash": "^4.17.21",

 vue/src/pages/Users.vue

@@ -4,32 +4,33 @@
import {useRoute} from "vue-router"
import Pagination from "../components/Pagination.vue"
import {getUsers} from "@/lib/api"
import {useRouteQuery} from '@vueuse/router'

const route = useRoute()
const userId = route.params.userId
const users = reactive({
   total: 0,
   offset: 0,
   offset: 0, // NO! USE offset BELOW!
   limit: 10,
   data: [],
})
const offset = useRouteQuery("offset", 0, {transform: Number})
const limit = 24
const error = ref(null)

onMounted(init)
onMounted(() => init(offset.value))

/////////////////////////////////////////////////////////////////////////

async function init (offset = 0) {
   // const res = await fetch(`/api/users?offset=${offset}&limit=${limit}&token=jiuGfr432898D90290kjfsldkfn3hh8F`)
   // const data = await res.json()
   const data = await getUsers(offset, limit)
async function init (noffset = 0) {
   const data = await getUsers(noffset, limit)
   console.log(data)
   Object.assign(users, data)
   offset.value = noffset
}

function go (offset) {
   console.log("go", offset)
   console.log("go to offset", offset)
   return init(offset)
}