diff --git a/docs/guide/getters.md b/docs/guide/getters.md index 11daa7ca6..058699fd7 100644 --- a/docs/guide/getters.md +++ b/docs/guide/getters.md @@ -14,7 +14,11 @@ computed: { If more than one component needs to make use of this, we have to either duplicate the function, or extract it into a shared helper and import it in multiple places - both are less than ideal. -Vuex allows us to define "getters" in the store. You can think of them as computed properties for stores. Like computed properties, a getter's result is cached based on its dependencies, and will only re-evaluate when some of its dependencies have changed. +Vuex allows us to define "getters" in the store. You can think of them as computed properties for stores. + +::: warning WARNING +As of Vue 3.0, the getter's result is **not cached** as the computed property does. This is a known issue that requires Vue 3.1 to be released. You can learn more at [PR #1878](https://github.com/vuejs/vuex/pull/1883). +::: Getters will receive the state as their 1st argument: diff --git a/src/store.js b/src/store.js index 33c3fa783..68113a5d2 100644 --- a/src/store.js +++ b/src/store.js @@ -1,4 +1,4 @@ -import { reactive, computed, watch } from 'vue' +import { reactive, watch } from 'vue' import { storeKey } from './injectKey' import devtoolPlugin from './plugins/devtool' import ModuleCollection from './module/module-collection' @@ -286,15 +286,15 @@ function resetStoreState (store, state, hot) { store._makeLocalGettersCache = Object.create(null) const wrappedGetters = store._wrappedGetters const computedObj = {} - const computedCache = {} forEachValue(wrappedGetters, (fn, key) => { // use computed to leverage its lazy-caching mechanism // direct inline function use will lead to closure preserving oldState. // using partial to return function with only arguments preserved in closure environment. computedObj[key] = partial(fn, store) - computedCache[key] = computed(() => computedObj[key]()) Object.defineProperty(store.getters, key, { - get: () => computedCache[key].value, + // TODO: use `computed` when it's possible. at the moment we can't due to + // https://github.com/vuejs/vuex/pull/1883 + get: () => computedObj[key](), enumerable: true // for local getters }) })