How to make a getter function?

Question

Vue.js

The vuex store has an array of categories and an array of posts with the id of the category it belongs to:

{
  posts: [
    {id: 1, catId: 1, title: 'Foo'},
    //...
  ],
  categories: [
    {id: 1, title: 'CatFoo'}
  ]
}

As the application progresses, you need to get an array of posts for a certain category. How to do it via vuex getter? So that it caches the result and does not perform an array filter on each access.

Answer 1

As a result, I wrote something like this:

getters: {
  getPostsByCategory(state) {
    const map = new Map();
    state.posts; // Необходимо чтобы геттер пересчитывался при изменении state.posts

    return (catId) => {
      if (map.has(catId)) {
        return map.get(catId);
      }

      let posts = state.posts.filter(p => p.catId === catId);
      map.set(catId, posts);


      return posts;
    };
  }
}

How it works:
A getter does not return a result, but a function. This function filters posts and caches the result through a closure. If any other component requires a list of posts of the same category, the eni will be returned from the cache.
When state.posts changes, this internal cache is cleared and the list of posts will be regenerated