fix: getters being destroyed on component destroy (#1878) (#1883)

fix #1878

package.json

@@ -52,7 +52,7 @@
  },
  "homepage": "https://github.com/vuejs/vuex#readme",
  "peerDependencies": {
- "vue": "^3.0.2"
+ "vue": "^3.2.0"
  },
  "dependencies": {
  "@vue/devtools-api": "^6.0.0-beta.11"
@@ -65,7 +65,7 @@
  "@rollup/plugin-node-resolve": "^13.0.0",
  "@rollup/plugin-replace": "^2.4.2",
  "@types/node": "^15.6.0",
- "@vue/compiler-sfc": "^3.0.11",
+ "@vue/compiler-sfc": "^3.2.4",
  "babel-jest": "^26.6.3",
  "babel-loader": "^8.2.2",
  "brotli": "^1.3.2",
@@ -89,8 +89,8 @@
  "todomvc-app-css": "^2.4.1",
  "typescript": "^4.2.4",
  "vitepress": "^0.11.5",
- "vue": "^3.0.11",
- "vue-loader": "^16.2.0",
+ "vue": "^3.2.4",
+ "vue-loader": "^16.5.0",
  "vue-style-loader": "^4.1.3",
  "webpack": "^4.43.0",
  "webpack-dev-middleware": "^3.7.2",

src/store-util.js

@@ -1,4 +1,4 @@
-import { reactive, watch } from 'vue'
+import { reactive, computed, watch, effectScope } from 'vue'
 import { forEachValue, isObject, isPromise, assert, partial } from './util'
 
 export function genericSubscribe (fn, subs, options) {
@@ -29,30 +29,42 @@ export function resetStore (store, hot) {
 
 export function resetStoreState (store, state, hot) {
  const oldState = store._state
+ const oldScope = store._scope
 
  // bind store public getters
  store.getters = {}
  // reset local getters cache
  store._makeLocalGettersCache = Object.create(null)
  const wrappedGetters = store._wrappedGetters
  const computedObj = {}
- 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)
- Object.defineProperty(store.getters, key, {
- // 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
+ const computedCache = {}
+
+ // create a new effect scope and create computed object inside it to avoid
+ // getters (computed) getting destroyed on component unmount.
+ const scope = effectScope(true)
+
+ scope.run(() => {
+ 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,
+ enumerable: true // for local getters
+ })
  })
  })
 
  store._state = reactive({
  data: state
  })
 
+ // register the newly created effect scope to the store so that we can
+ // dispose the effects when this method runs again in the future.
+ store._scope = scope
+
  // enable strict mode for new state
  if (store.strict) {
  enableStrictMode(store)
@@ -67,6 +79,11 @@ export function resetStoreState (store, state, hot) {
  })
  }
  }
+
+ // dispose previously registered effect scope if there is one.
+ if (oldScope) {
+ oldScope.stop()
+ }
 }
 
 export function installModule (store, rootState, path, module, hot) {

src/store.js

@@ -39,6 +39,12 @@ export class Store {
  this._modulesNamespaceMap = Object.create(null)
  this._subscribers = []
  this._makeLocalGettersCache = Object.create(null)
+
+ // EffectScope instance. when registering new getters, we wrap them inside
+ // EffectScope so that getters (computed) would not be destroyed on
+ // component unmount.
+ this._scope = null
+
  this._devtools = devtools
 
  // bind commit and dispatch to self

test/helpers.js

@@ -4,7 +4,7 @@ import puppeteer from 'puppeteer'
 export function mount (store, component) {
  const el = createElement()
 
- component.render = () => {}
+ component.render = component.render || (() => {})
 
  const app = createApp(component)
 

test/unit/modules.spec.js

@@ -1,4 +1,5 @@
-import { nextTick } from 'vue'
+import { h, nextTick } from 'vue'
+import { mount } from 'test/helpers'
 import Vuex from '@/index'
 
 const TEST = 'TEST'
@@ -124,6 +125,56 @@ describe('Modules', () => {
  store.commit('a/foo')
  expect(mutationSpy).toHaveBeenCalled()
  })
+
+ it('should keep getters when component gets destroyed', async () => {
+ const store = new Vuex.Store()
+
+ const spy = jest.fn()
+
+ const moduleA = {
+ namespaced: true,
+ state: () => ({ value: 1 }),
+ getters: {
+ getState (state) {
+ spy()
+ return state.value
+ }
+ },
+ mutations: {
+ increment: (state) => { state.value++ }
+ }
+ }
+
+ const CompA = {
+ template: `<div />`,
+ created () {
+ this.$store.registerModule('moduleA', moduleA)
+ }
+ }
+
+ const CompB = {
+ template: `<div />`
+ }
+
+ const vm = mount(store, {
+ components: { CompA, CompB },
+ data: () => ({ show: 'a' }),
+ render () {
+ return this.show === 'a' ? h(CompA) : h(CompB)
+ }
+ })
+
+ expect(store.getters['moduleA/getState']).toBe(1)
+ expect(spy).toHaveBeenCalledTimes(1)
+
+ vm.show = 'b'
+ await nextTick()
+
+ store.commit('moduleA/increment')
+
+ expect(store.getters['moduleA/getState']).toBe(2)
+ expect(spy).toHaveBeenCalledTimes(2)
+ })
  })
 
  // #524