Getter with params not reactive?

[3zzy]

I have this getter:

getDataById: (state) => ({ dataId, dataType } = {}) => {
    return state?.[dataType].find(dataObj => dataObj.id === dataId);
},

which when used in a component like so:

const data = DataStore.getDataById({ dataType: 'dynamic', dataId: props.dataId });

... stays undefined. Verified in setupState.data.
Even tried watching the data, not no change detected.

However, if I do the following in console:

$vm.setupState.DataStore.getDataById({ dataType: 'dynamic', dataId: 'contributions' })`

returns the correct data.

What am I doing wrong here?

Thanks!

[posva]

You need a computed where you call the function:

const data = computed(() => DataStore.getDataById({ dataType: 'dynamic', dataId: props.dataId }))

[3zzy]

Oh ok, I though getter was already reactive so using computed might cause an issue.

Many thanks for the quick response and of course the wonderful library.

[3zzy]

@posva Sorry, can I also ask if I wanted to watch the changes, this works:

watch(data, (data, prevData) => {
   console.log({data, prevData})
});

but just wanted to confirm if thats the best way to do it? I don't know because watching a computed prop doesn't feel right.

[posva]

The getter is a computed but you are returning a function and then calling it which returns a non reactive result (same in Vuex)
watching a computed is fine