[Vuejs]-Searching in large object arrays

Let’s take for example a simple blog.

We have the following pages:

/blog/page/1
/blog/page/4

/slug-of-the-post
/slug-of-another-post

My Vuex store has the following keys:

{
    posts: {},
    pages: {},
}

Now when the user goes to /blog/page/1 I fetch all the data for that page from the API and store each post in the posts object, and in the pages object I store only a reference to the post.
This is how the store looks like after going to /blog/page/1

{
    posts: {
        'blog-post-example': {
            id: 1,
            title: 'test'
        },
        'another-blog-post-example': {
            id: 2,
            title: 'another title'
        }

    },
    pages: {
        1: [
            'blog-post-example',
            'another-blog-post-example'
        ]
    },
}

Same happens if they go to the next page “/blog/page/2”.

However, if they go back to “/blog/page/1”, I can detect that the data of that page has already been fetched and I don’t need to go back to the API.

This way you smoothen the UX, without loading all your blog posts into the store at once.

Hope that helps.