Skip to content

VueX getter caching in combination with VueX-ORM #116

@SimonDatapas

Description

@SimonDatapas

Additional context

I'm not totally sure wether I'm posting this in the right repo, but I thought it might be usefull for everyone here to know.

Describe the bug / Expected behaviour

It seems that when querying VueX-ORM models inside a VueX store getter, the getter can't cache the result properly.
I have a store getter that contains a query that can take up to a full second to return the requested data (yes, lots of data).
When I call this getter twice from inside a component, the render time needed will be 2 seconds instead of 1.
If I would refactor this getter to be a state property and be updated everytime the corresponding repo's would be updated, The render time will be reduced to an instant and the time to mutate the repo's will take 1 second longer.
I would expect in my first scenario that the render time wouldn't increase no matter how many times the getter would be called from within that component. (For as far as I understand, this behaviour would be the same as store getter caching where getters only refer to store state.)

Steps to reproduce the bug

// Template inside component
<template>
   <section v-for="post in posts">{{post.name}}</section>
   <section v-for="post in posts">{{post.name}}</section>
</template>

// Computed property inside component
posts() {
    return this.$store.getters.posts;
}

// Store
getters: {
    posts() {
        return store.$repo(Post).all();
    }
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions