Getter function called on every call vs onChangeOnly

[husayt]

Shouldn't getter function be only called when anything inside changes? My getter function is calculated on every call. I expected it to provide computed value without reculating if no value in the body changed.

[posva]

do you have a reproduction?

Solution: #449 (reply in thread)

[husayt]

Hi here is a code snippet.

import { computed } from "vue"
import { reactivePick } from "@vueuse/core"
import { useStorageStore } from "./storage"

export const useSettingsStore = defineStore({
  id: "settings",
  state: () => ({
    fonts: [
      {
        className: "font-amino",
        show: true,
        scale: 1.0,
      },
      {
        className: "font-berrio",
        show: true,
        scale: 1.0,
      },
      { className: "font-menano", show: true, scale: 0.8 },
      {
        className: "font-schehera",
        show: true,
        scale: 1.3,
      },
....
  
    ],
    }

getters: {
   fontSettings() {
      console.log("-------- this shouldn't be called too many times")
      const strgStore = useStorageStore()
      const res = reactivePick(
        strgStore,
        "fontName",
        "stretch",
        "transFontSize",
        "hideInternalSigns"
      )
      res.font = computed(
        () =>
          this.fonts.find((x) => x.className == res.fontName) || this.fonts[0]
      )
      res.showOriginalText = this.showOriginalText
      return res
    },
  }
}

I have list of components on the screen and each of them using fontSize getter. I expected log message only once as parameters didn;t change. But it was called for every component. Not sure if it is because of computed or using another store or smth else.

Thanks again

[posva]

note a getter is a computed and should not have side effects like res.font =.... If you treat getters as the functions you pass to computed(), you should get the expected result

[husayt]

I have just tried something as simple as

getters:{
    simple() {
      console.log("-------- shouldn't be called too many times")
      this.showOriginalText
    },
}

and called this from 5 components setup method. Even then console.log was called 5 times. So this is definitely not like computed, as it would be expected to be cached and get console.log only once.

I am using vue3 and pinia 2.0.0-alpha.13.

[husayt]

@posva I think this is a bug, as otherwise without caching there is no difference between action and a getter.

Meanwhile, to get arround I am using a computed do that job

export const fontSettings = computed(() => useSettingsStore().fontSettings)

and import that computed from everywhere where I need this getter from.

[posva]

Having 5 logs in 5 components is a technical limitation until Vue implements vuejs/rfcs#212

Pinia is working around this by creating computed properties tied to the component where the components is using them while only creating the state once, outside of all components' lifecycle.

I want to experiment with a small optimization that relies on inject/provide for nested components reusing a store defined by a parent, allowing us to avoid this problem until the RFC is merged. Implemented: using a store in a parent component will allow children to reuse it automatically

Note that if you don't use SSR, you should able to export the whole store at the application level:

export const pinia = createPinia()

// add plugins to pinia

export const userStore = defineStore({ })(pinia)