Technologies - Pinia, Nuxt 3
I need to update the information of a logged-in user on my platform.
When navigating using NuxtLink, the data is retrieved from the store and displayed in the form. However, if I manually refresh the page with F5, the data does not appear in the form, even though it's present in the form variable when inspected through developer tools.
<template>
<Form
v-slot="{ errors }"
:validation-schema="schema"
class="flex flex-col"
@submit="onSubmit">
<div class="flex flex-col mb-3">
<label class="text-sm font-medium mb-2">Email</label>
<UIFormFieldEmail
v-model="form.email"
:error="errors.email" />
</div>
<div class="flex flex-col mb-5">
<label class="text-sm font-medium mb-2">First Name</label>
<UIFormField
v-model="form.firstName"
:error="errors.firstName"
name="firstName" />
</div>
<div class="flex flex-col mb-5">
<label class="text-sm font-medium mb-2">Last Name</label>
<UIFormField
v-model="form.lastName"
:error="errors.lastName"
name="lastName"/>
</div>
</Form>
</template>
<script lang="ts" setup>
import {
Form,
useForm,
Field,
defineRule
} from 'vee-validate';
import {
useAuthStore
} from '~/store/auth';
import {
storeToRefs
} from 'pinia';
const authStore = useAuthStore();
const {
user
} = storeToRefs(authStore);
const form = reactive({ ...user.value
});
</script>