Vue Composition API - Using computed which transforms data in setup()?

Question

We're currently converting from boilerplate VUE 2 to Composition API, and i'm struggling to understand how to rewrite our current computed to support Composition API :

setup() {
    const store = useStore<StoreState>();
    // Question : how do i implement the infoFields into the setup ? 
    // const contactSingle = computed(() => store.state.contacts.contactSingle);
    return { contactSingle };
  },
computed: {
    ...mapGetters("contacts", ["getContact"]),
    infoFields(): any {
      return [
        {
          value: (this as any).getContact.customer.firstName,
          label: "Fornavn",
        },
        {
          value: (this as any).getContact.customer.lastName,
          label: "Etternavn",
        },
        ...
        ...
        ];
    },


 <v-row>
  <v-col class="pt-0" v-for="(item, i) in infoFields" :key="i + '-field'" cols="12" xs="12" sm="6" md="6" lg="4">
    <BaseSheetField :value="item.value" :label="item.label" />
  </v-col>
</v-row>

The code is not equivalent. If you have a getter, use a getter. data becomes ref or reactive. By using a computed inside data you've lost reactivity. Is this intentional? — Estus Flask
– Estus Flask, Commented Sep 14, 2021 at 14:15
Probably should be reactive yes.. My normal approach would be using a clean getter, populate the form with data without using the iteration. But.. since the tech-lead want it this way, i'm trying to find a way to do this and keep the reactivtiness within.. any ideas @EstusFlask ? — Terje Nygård
– Terje Nygård, Commented Sep 14, 2021 at 14:30
It's like the answer says, just use a computed. Would be the same in Vue 2 to preserve reactivity, with different syntax. — Estus Flask
– Estus Flask, Commented Sep 14, 2021 at 14:34

Igor Moraru · Accepted Answer · 2021-09-14 14:22:48Z

2

Not sure what exactly is the problem, but I think using store.getters in computed should work:

const infoFields = computed(() => {
    return [
        {
          value: store.getters["contacts/getContact"].customer.firstName,
          label: "Fornavn",
        },
        {
          value: store.getters["contacts/getContact"].customer.lastName,
          label: "Etternavn",
        }
    ]
})

answered Sep 14, 2021 at 14:22

Igor Moraru

7,7491 gold badge15 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Terje Nygård Over a year ago

This might be sufficent :) Will try this out Igor. (Have to check on the requirements for reactiveness though...)

Terje Nygård Over a year ago

it worked :) Thanks for great help and for spending time helping me out Igor Moraru and Estus Flask :)

Collectives™ on Stack Overflow

Vue Composition API - Using computed which transforms data in setup()?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related