Как сделать push своих данный в useOffsetPagination?

Question

[Lahma]

Привет. Подскажите как пользоваться useOffsetPagination?

В demo данные получаем с помощью for:

for (let i = 0; i < 80; i++)
  database.value.push({ id: i, name: `user ${i}` })

Источник: https://github.com/vueuse/vueuse/blob/main/package...

Загружаю данные с помощью useFetch, а запушить в массив database не получается.

Отрывок моего кода:

const database = ref([])

const url = 'https://fakestoreapi.com/products'

const { data: posts } = useFetch(url).get().json()

if (posts) {
  database.value.push({ id: posts.id, name: posts.title })
}

Пример полностью:

import { useOffsetPagination } from '@vueuse/core'
import { useFetch } from '@vueuse/core'
import { ref, watchEffect } from 'vue'

const database = ref([])

const url = 'https://fakestoreapi.com/products'

const { data: posts } = useFetch(url).get().json()

for (let i = 0; i < 80; i++) {
  database.value.push({ id: i, name: `user${i}`})
}

function fetch(page, pageSize) {
  return new Promise((resolve, reject) => {
    const start = (page - 1) * pageSize
    const end = start + pageSize
    setTimeout(() => {
      resolve(database.value.slice(start, end))
    }, 100)
  })
}

const data = ref([])

const page = ref(1)
const pageSize = ref(10)

fetchData({
  currentPage: page.value,
  currentPageSize: pageSize.value,
})

function fetchData({ currentPage, currentPageSize }) {
  fetch(currentPage, currentPageSize).then((responseData) => {
    data.value = responseData
  })
}

const {
  currentPage,
  currentPageSize,
  pageCount,
  isFirstPage,
  isLastPage,
  prev,
  next,
} = useOffsetPagination({
  total: database.value.length,
  page: 1,
  pageSize,
  onPageChange: fetchData,
  onPageSizeChange: fetchData,
})

Answer 1

[Антон Иванов]

Posts - это массив? Если да, вспоминаем про функции перебора массива. Отсюда уже и код пишем. И вообще не очень понял причем тут useOffsetPagination? Вы его в вашем "отрывке" не используете.

Comments

[Lahma]

import { useOffsetPagination } from '@vueuse/core'
import { useFetch } from '@vueuse/core'
import { ref, watchEffect } from 'vue'

const database = ref([])

const url = 'https://fakestoreapi.com/products'

const { data: posts } = useFetch(url).get().json()

for (let i = 0; i < 80; i++) {
  database.value.push({ id: i, name: `user${i}`})
}

function fetch(page, pageSize) {
  return new Promise((resolve, reject) => {
    const start = (page - 1) * pageSize
    const end = start + pageSize
    setTimeout(() => {
      resolve(database.value.slice(start, end))
    }, 100)
  })
}

const data = ref([])

const page = ref(1)
const pageSize = ref(10)

fetchData({
  currentPage: page.value,
  currentPageSize: pageSize.value,
})

function fetchData({ currentPage, currentPageSize }) {
  fetch(currentPage, currentPageSize).then((responseData) => {
    data.value = responseData
  })
}

const {
  currentPage,
  currentPageSize,
  pageCount,
  isFirstPage,
  isLastPage,
  prev,
  next,
} = useOffsetPagination({
  total: database.value.length,
  page: 1,
  pageSize,
  onPageChange: fetchData,
  onPageSizeChange: fetchData,
})

[Lahma]

Мысль была с помощью .map или .forEach