# Vue.js Advanced Reactivity API and Caching Method-style Getters

DevFeed: [Vue.js Advanced Reactivity API and Caching Method-style Getters](<https://devfeed.tech/articles/vue-js-advanced-reactivity-api-and-caching-method-style-getters-35104.md>)

Original publisher: [Read original article](<https://engineroom.teamwork.com/vue-js-advanced-reactivity-api-and-caching-method-style-getters-a80979b6660?source=rss----cea4eecd5960---4>)

Author: Michael Gallagher

Published: 2019-07-11T11:48:14Z

Content type: tutorial

Language: en

Sources: [Teamwork](<https://devfeed.tech/sources/teamwork.md>)

Topics: [Caching](<https://devfeed.tech/topics/caching.md>), [Vue.js](<https://devfeed.tech/topics/vue.md>), [reactive](<https://devfeed.tech/topics/reactive.md>), [Code](<https://devfeed.tech/topics/code.md>)

Tags: [advanced](<https://devfeed.tech/tags/advanced.md>), [caching](<https://devfeed.tech/tags/caching.md>), [code](<https://devfeed.tech/tags/code.md>), [front-end-development](<https://devfeed.tech/tags/front-end-development.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [js](<https://devfeed.tech/tags/js.md>), [performance](<https://devfeed.tech/tags/performance.md>), [vue](<https://devfeed.tech/tags/vue.md>), [vue-js](<https://devfeed.tech/tags/vue-js.md>), [vuejs](<https://devfeed.tech/tags/vuejs.md>), [vuex](<https://devfeed.tech/tags/vuex.md>)

## AI overview

This tutorial explains why Vuex method-style getter invocations do not cache their returned values, distinguishes that behavior from property-style getter caching, and discusses how to implement result caching when performance measurements justify it. It also relates the approach to Vue's Advanced Reactivity API and method-style computed properties.

## Source excerpt

We're going to talk about a common request when working with relational data in Vuex. Why and how to cache method-style getter invocations, though the principles would also apply to method-style computed properties. If you have been following recent Vue v3 RFCs, you might have come across the Advanced Reactivity API, which comes as a very welcome direction for Vue to take. This article is written using Vue v2, but ultimately the code will be simplified if this RFC is implemented. Firstly, although both property-style and method-style getters offer caching as part of core Vuex functionality, method-style getter invocations do not cache results. If that doesn't make much sense, keep reading, it should become clear. What is a Method-style Getter? Below is the example from the Vuex documentation of a method-style getter, sometimes referred to as a parameterized getter. getTodoById: (state) => (id) => { return state.todos.find(todo => todo.id === id) } Normally a getter works by processing state into a given result. todoCount: (state) => state.todos.length, This will mean that store.getters.todoCount might provide the value 12, which will be cached in the event that the value is accessed again without any underlying reactive data changing. isTodoOpen: (state) => (id) => !!state.todos[id].assignee && state.todos[id].status !== 'complete', The above example can be accessed by store.getters.isTodoOpen(123) which will return a boolean. This value is not cached, calling it repeatedly will result in multiple executions. So what is cached here? Nothing from a reactive standpoint. When the getter property is accessed on the store, store.getters.isTodoOpen, just prior to invocation, this will run the outer function which will not access any reactive data, but create a function, an arrow which accepts id. This created function is now cached. Why aren't the results of these getters cached? There are lots of good reasons not to cache the results of these functions. How many times wo