Accessing previous value in a getter to only trigger effect if content of the value changed

[uli123abc]

In Vue 3.4+, the previous value of a getter can be accessed from a function parameter: https://vuejs.org/guide/essentials/computed#previous

When a getter returns an object or array, this allows for a pattern to compare the previous value with the newly computed value and to return the previous value if it didn't change: https://vuejs.org/guide/best-practices/performance.html#computed-stability

---

I would like to use a similar pattern for performance optimizations with Pinia getters, so that a getter that returns an array only triggers an effect if the content of the array changed.

Currently I am using the following with Pinia:

getters: {
    myGetter: (state): string[] => {
        const result: string[] = calculateResult(state)
        if (isEqual(state.myGetter, result)) {
            return state.myGetter
        }
        return result
    },
}

This works and solves my problem. However, I could not find any documentation about accessing the previous value through the state. like in this example. I wonder if that might break with future versions of Pinia and if there is a recommended solution?

[posva]

You cannot have a getter and a state property with the same name in pinia so this will break in other ways. What you are getting is just the state, there isn’t a previous value you can handle that with an extra value in state though

[uli123abc]

Thanks for your answer @posva :) Yes, I am aware that I cannot define an entry in the state section that has the same name as a getter.

However, in my example, I didn't do that. Still, state.myGetter actually returns the previous value of the getter and I can achieve what I want with the code in my example. It works.

However, I am wondering if that is safe to do and if that could break in the future? It seems to be an undocumented and unknown feature of Pinia 👀

---

If it is unsafe what I am doing, then I would have to add a separate instance or state value, I guess, as you suggest, but I wanted to avoid that, because it just adds more code.

Equivalent solution with additional instance variable (not state), that I wanted to avoid would be

getters: {
    myGetter(this): string[] => {
        const result: string[] = calculateResult(this)
        if (isEqual(this._oldValue, result)) {
            return this._oldValue
        }
        this._oldValue = result
        return result
    },
}

---

I put a complete set of working examples into the Pinia Playground.

• Variant A: like my initial example
• Variant B: with an instance variable, like my second example
• Variant C: with a separate state

You can see in the console log, that the watchers do not trigger for A,B,C if the result of the getter is unchanged (which is desired).

However the watcher of the noisy getter triggers every time (not suprising, but this is what I wanted to avoid).

https://play.pinia.vuejs.org/#__DEV__eNrFV99z4jYQ/ldUP5zNDcjl0l47DDAEms60D2nnLnMvIZNRbAHK2ZIryYQMw//e1Q/AhvhCk3QuD4kt7X776dvVrrMOzosCL0sa9IK+SiQrNFJUlwXKCJ8PpoFW02A45SwvhNRojR6IThZtlIi8KDVN0QbNpMhRCBBhxUxpIemV+ERnamdSMM5I1ahU9HeWaSo/G+udHY5n+1WsFbhMeSK40qiygQYH/lHL2Fl+UdRCg2HVGiellJTrS5J7n9svRDLC9XkbRZw+fCFZSdtIZKl9sv7rKUdwUq5ERnEm5lHYjBJC9M3LGIzfhMH4FQwmb8Jg8gIGl4Kpx1dFtwj7yK5OBJ9kLPkKNRItSdaDcpSMz3eQdURjaQBqTEmamhjG3WDDrkHvx+6OwI2AF03zIiOawhtC/btSa8HRyOLBzfEcohCwgyHgITDXj/3YGT7jtNp5AYOS1r1Sthyu1yfWN74XjEdhG4WtzaYfG9//DDJ+C5DJa0Bsmp8E6MeVPATtwLWXTk4KfK8Eh8Zmq2jqN6Cf9VxdmTVoW+Z9Giy0LlQvjpOUg1tKM7aUmFMd8yKPR2AWy5JrltNOKvLRGf4Zd38FAkpX1zFVeedOigdFJaBMg3YlTgyLSyo7cK6USipPjXvgVot9sNcc3/ZeFzG2z82mNmhKl1qITHVIwU4lWvUZfcQfcTfO2F0MgWIG/FZHinRSmp+CvjUd/Yi7P+FfLOryzIPmBtWAwh3dQPq1gts9Y/OD5JuBxTIq/yo0g9tfKwKSZeLhT7umJfSg7XqyoMnXJ9bv1cqx/ltSm4HKsTSRc6rd9sXnS7qC591mLtIy8wXXsPmJQmcqDUdnNi55CrQrdpbtH7aWoaddqYuVplxtD2WIWjWsvZV58o2j7+me4bOKivUJDDLuhnZKZ4zT+sQ+muySzg6+DLadmamLf0qSQWfuXw0j0u2hq+ubNiIf7IPt0KSLM8rneoEGgwHsbN/evTNbFAr+MTJ9uY1sBTifD9f25cb6uKY95XRl+bjIB18bg+pJorByYOgvVh+loaf0kJtikZeMQ0dSPXQdkrvENCIACW98bpa+z93CDIM8lpnuIUifDZNam03L/iGJzcQuD5Vhs59Vfg8hvWAK27i4KNXCjySzY8aSzzRkEfjvIZvnAZzInqy1DXUNovlR636cXlDb9gR7I6eIp+IEiyLzVhuwZgH9AFkwg2+HyWY+7Dcmlcmwr49nbdueX6silPuR8PkquefaDLB3sirWfB201xjkfUbScVTV8hQhKyl9gY7W+9ZX23hfbVX9mmye1a3J8Um9GpkMahq+XNrJ967W4zt9XKXHNidW57Hjkyo3Mnmtyvajqql44/dofP5bz0MqRBB8pHtkRKQkj9B/gRpPKIKmzI1ozDZbTWADaoMiZdS1H7DK98ht1cCgYvM5dCz3HyU84L3B+/h/vUMNIrnf5t+IYPMvcioXvA==

import { defineStore } from 'pinia'
import { ref } from 'vue'

const isEqual = <T>(a1: T[], a2: T[]) => a1.length === a2.length && a1.every((val, index) => a2[index] === val)

export const useFilterStore = defineStore('filterStore', {
  state: () => ({
    names: ['abc', 'def'],
    variantC_oldResult: undefined,
  }),
  actions: {
    addName(val: string) {
      this.names.push(val)
    }
  },
  getters: {
    currentNameFilter_VariantA: (state): string[] => {
        const result: string[] = state.names.filter((name: string) => name !== '')
        if (state.currentNameFilter_VariantA && isEqual(state.currentNameFilter_VariantA, result)) {
            return state.currentNameFilter_VariantA
        }
        return result
    },

    currentNameFilter_VariantB(): string[] {
        const result: string[] = this.names.filter((name: string) => name !== '')
        if (this._variantB_oldResult && isEqual(this._variantB_oldResult, result)) {
            return this._variantB_oldResult
        }
        this._variantB_oldResult = result
        return result
    },

    currentNameFilter_VariantC: (state): string[] => {
        const result: string[] = state.names.filter((name: string) => name !== '')
        if (state.variantC_oldResult && isEqual(state.variantC_oldResult, result)) {
            return state.variantC_oldResult
        }
        state.variantC_oldResult = result
        return result
    },

    currentNameFilterNoisy(): string[] {
        /* BAD: returns a new result array instance even if it contains the same values,
        this triggers watchers.
        */
        const result: string[] = this.names.filter((name: string) => name !== '')
        return result
    },
  },
})

<script setup lang="ts">
import { watch, computed } from 'vue'
import { storeToRefs } from 'pinia'
import { useFilterStore } from './filterStore.ts'

const filterStore = useFilterStore()

watch(() => filterStore.currentNameFilter_VariantA, (newValue, oldValue) => {
  console.log('currentNameFilter_VariantA')
})

watch(() => filterStore.currentNameFilter_VariantB, (newValue, oldValue) => {
  console.log('currentNameFilter_VariantB')
})

watch(() => filterStore.currentNameFilter_VariantC, (newValue, oldValue) => {
  console.log('currentNameFilter_VariantC')
})

watch(() => filterStore.currentNameFilterNoisy, (newValue, oldValue) => {
  console.log('currentNameFilterNoisy')
})

const onClick = (val: string) => {
 console.log('click')
 filterStore.addName(val)
}
 

</script>

<template>
  <button @click="onClick('')">add empty</button>
  <button @click="onClick('x')">add value</button>
  <div>{{ filterStore.currentNameFilter_VariantA.join(', ')}}</div>
  <div>{{ filterStore.currentNameFilter_VariantB.join(', ')}}</div>
  <div>{{ filterStore.currentNameFilter_VariantC.join(', ')}}</div>
  <div>{{ filterStore.currentNameFilterNoisy.join(', ')}}</div>
</template>