Are Getters reactive by default?

[bobmcallan]

Vue 3, using setup;

` setup() {
const user = userStore();

        return {
            username: computed(() => user.username),
        };
    }

`

or

` setup() {
const user = userStore();

        return {
            username: user.getUsername,
        };
    }

`

Which is reactive, and if getters are not, then why have them?

[posva]

Getters are computed properties under the hood. I don't really understand your question. Another way of writing it is:

setup() {
  const user = useUserStore()
  const username = toRef(user, 'username')
  // or if extracting multiple ones
  const { username } = toRefs(user)
  return {
    username
  }
}

[bobmcallan]

Thanks, you highlighted my question. "Getters are computed properties under the hood.",

However in the setup code I need to wrap with "username: computed(() => user.username),". Does this not double up computed(computed(variable))? Or am I missing something?

Bob

[posva]

It doesn't double up. You can also use toRef(store, 'username') instead of creating a computed. You can also return the whole store in setup.