如何将新获取的数据添加到现有数组（Js，VueJs）

Question

我在用于获取 post 数据的 Api 路由上有一些分页。

当分页在第2页时，我想把从页面中抓取的数据添加到现有的数组中。

用于获取数据的函数

const posts = ref([]);
const page = ref(1);

const getPosts = async (page) => {
        await axios
            .get("/api/explore/gallery/?page=" + page)
            .then((response) => {
                if (page === 1) {
                    posts.value = response.data;
                } else {
                    posts.value = { ...posts.value, ...response.data };
                }
            });
    };

So when the page is 2 onward, the fetched data will add to the existing array.

我用posts.value = { ...posts.value, ...response.data };

的结果

id 从 51 开始，而不是 1 - 100。

我也试过posts.value = [ ...posts.value, ...response.data ];但退回了

PostApi.js:12 Uncaught (in promise) TypeError: Invalid attempt to spread non-iterable instance.
In order to be iterable, non-array objects must have a [Symbol.iterator]() method.
    at _nonIterableSpread (PostApi.js:12:39)
    at _toConsumableArray (PostApi.js:10:131)
    at eval (PostApi.js?c0c4:15:21)

response.data 看起来像这样

post.value看起来像这样

Answer 1

我找到了解决方案，

const getPosts = async (page) => {
    await axios
        .get("/api/explore/gallery/?page=" + page)
        .then((response) => {
            if (page === 1) {
                posts.value = response.data;
            } else {
                posts.value = {
                    ...posts.value,
                    data: [...posts.value.data, ...response.data.data],
                };
            }
        });
};

Answer 2

您可以使用缓存执行此操作，以更好地控制客户端上累积的数据量。 This answer 提供了一个合理的 LRU 缓存。将它与您的 api 结合起来可能看起来像这样...

const cache = new LRU(8);

const getPosts = async (page) => {
    const result = cache.get(page);
    if (result) return Promise.resolve.result;
    return await axios
        .get("/api/explore/gallery/?page=" + page)
        .then((response) => {
            cache.set(page, response.data);
            return response.data;
        });
};

您的标记将显示 posts 的当前值。触发您的寻呼的任何用户事件都会执行此操作...

// in an async method
this.posts = await getPosts(pageComputedFromUI);

这将与您的解决方案（它缓存所有内容并且从不驱逐任何内容）产生大致相同的效果，但内存的好处保持在您的控制之下 - 并且以更多网络请求为代价。

如何将新获取的数据添加到现有数组（Js，VueJs）

How to add an newly fetched data to an existing array (Js, VueJs)

javascript

vuejs3