Wondering if we can gets some docs or recommendations on when to use computed with pinia getters

[bjankord]

Our team is moving from Vue 2 to Vue 3 and Vuex to Pinia and with that move, some questions have come up around using Vue 3's computed with getters in pinia.

In Vuex in Vue 2, we'd often have code like the following:

import { mapGetters, mapActions } from 'vuex';
import Help from '../../components/Help/index.vue';

export default {
  name: 'home',
  components: {
    Help,
  },
  computed: {
    ...mapGetters({
      translations: 'getTranslations',
      validFamilyId: 'getValidFamilyId',
    }),
  }
};

With Vue 3, we are using the composition API as well as <script setup>.

I'm curious, should we still use computed for our getters? Is there any pro/cons or anything else we should be thinking about for this pattern?

<script setup>
import { reactive, computed } from 'vue';
import useTranslationsStore from '../../store/translationStore';
import useFamilyStore from '../../store/familyStore';
import Help from '../../components/Help/index.vue';

const translationsStore = useTranslationsStore();
const familyStore = useTranslationsStore();

/* State */
const state = reactive({
  translations: computed(
    () => translationsStore.getTranslations,
  ),
 validFamilyId: computed(
    () => familyStore.getValidFamilyId,
  ),
});

I saw a comment from @posva using computed here: #107 (comment)
and I've seen a couple of issues related to using computed / getters:

• objects/arrays in getters not reactive? #780
• storeAsRefs doesn't work - values resolve to undefined #1079

Mainly looking for guidance/recommendation on when we should be wrapping getters in computed in our <script setup> and if there are any considerations we should be thinking about around this pattern.

[emmanuelgeoffray]

I am also migrating from Vue 2 to Vue 3 with script setup.
By trial/error, I found that you need computed for getters. That makes sense as we used to have a mapGetters to see a getter as a computed in a component.

From my example, I'd like to add that you can also directly assign values without a state reactive object :

const translations = computed(() => translationsStore.getTranslations)
const validFamilyId = computed(() => familyStore.getValidFamilyId)

[posva]

You can actually make it much simpler, you don't need any wrapping at all. The only thing you can't do is destructure state or getters (const { validFamilyId } = useFamilyStore() -> not reactive):

<script setup>
const familyStore = useFamilyStore()

function doStuff() {
  familyStore.validFamilyId // read it directly
}

// or use storeToRefs() from pinia
const { validFamilyId } = storeToRefs(familyStore)
</script>

<template>
{{ familyStore.validFamilyId }}
</template>

BTW don't prefix getters with get unless they are returning a function and are meant to be called like store.getValidFamilyId(...), it makes more sense semantically.