Nuxt.js 3 : Gestion des États avec Pinia

// nuxt.config.js
export default defineNuxtConfig({
  // ... other options
  modules: [
    // ...
    '@pinia/nuxt',
  ],
})

import { defineStore } from 'pinia';
import { ref } from 'vue';

export const useUserStore = defineStore('user', () => {
  const userData = ref({
    firstName: 'John',
    lastName: 'Doe',
    email: '[email protected]',
    phoneNumber: '+012 (345) 6789',
    address: '205 Main Street, USA'
  });

  function setUserData(newUserData) {
    userData.value = { ...userData.value, ...newUserData };
  }

  return { userData, setUserData };
});

<template>
    <div class="col-xl-4">
      <div class="card mb-4 mb-xl-0">
        <div class="card-header">Profile Picture</div>
        <div class="card border-0 shadow">
           <div class="card-body text-center"></div>
            <img class="border img-account-profile d-block mx-auto rounded-circle mb-2" src="@/assets/image/profile01.jpeg" height="50%" width="50%" alt="">
            <div class="card-body p-1-9 p-xl-5">
                <div class="mb-4">
                    <h3 class="h4 mb-0">{{ userData.firstName }} {{ userData.lastName }}</h3>
                </div>
                <ul class="list-unstyled mb-4">
                    <li class="mb-3"><a href="#!"><i class="far fa-envelope display-25 me-3 "></i>{{ userData.email }}</a></li>
                    <li class="mb-3"><a href="#!"><i class="fas fa-mobile-alt display-25 me-3 "></i>+012 (345) 6789</a></li>
                    <li><a href="#!"><i class="fas fa-map-marker-alt display-25 me-3 "></i>205 Main Street, USA</a></li>
                </ul>
                <ul class="social-icon-style2 ps-0">
                    <li><a href="#!" class="rounded-3"><i class="fab fa-facebook-f"></i></a></li>
                    <li><a href="#!" class="rounded-3"><i class="fab fa-twitter"></i></a></li>
                    <li><a href="#!" class="rounded-3"><i class="fab fa-youtube"></i></a></li>
                    <li><a href="#!" class="rounded-3"><i class="fab fa-linkedin-in"></i></a></li>
                </ul>
            </div>
        </div>
        </div>
    </div>
  </template>

<script setup>
import { storeToRefs } from 'pinia';
import { useUserStore } from '@/stores/user';

const userStore = useUserStore();
const { userData } = storeToRefs(userStore);
</script>

<style>

.card {
    box-shadow: 0 0.15rem 1.75rem 0 rgb(33 40 50 / 15%);
}
.card .card-header {
    font-weight: 500;
}
.card-header:first-child {
    border-radius: 0.35rem 0.35rem 0 0;
}
.card-header {
    padding: 1rem 1.35rem;
    margin-bottom: 0;
    background-color: rgba(33, 40, 50, 0.03);
    border-bottom: 1px solid rgba(33, 40, 50, 0.125);
}
.social-icon-style2 li a {
    display: inline-block;
    font-size: 14px;
    text-align: center;
    color: #ffffff;
    background: #3f50e9;
    height: 41px;
    line-height: 41px;
    width: 41px;
}
.rounded-3 {
    border-radius: 0.3rem !important;
}

.social-icon-style2 {
    margin-bottom: 0;
    display: inline-block;
    padding-left: 10px;
    list-style: none;
}

.social-icon-style2 li {
    vertical-align: middle;
    display: inline-block;
    margin-right: 5px;
}

a, a:active, a:focus {
    color: #616161;
    text-decoration: none;
    transition-timing-function: ease-in-out;
    -ms-transition-timing-function: ease-in-out;
    -moz-transition-timing-function: ease-in-out;
    -webkit-transition-timing-function: ease-in-out;
    -o-transition-timing-function: ease-in-out;
    transition-duration: .2s;
    -ms-transition-duration: .2s;
    -moz-transition-duration: .2s;
    -webkit-transition-duration: .2s;
    -o-transition-duration: .2s;
}

.text-secondary, .text-secondary-hover:hover {
    color: #59b73f !important;
}
.display-25 {
    font-size: 1.4rem;
}

.text-primary, .text-primary-hover:hover {
    color: #ff712a !important;
}

p {
    margin: 0 0 20px;
}

.mb-1-6, .my-1-6 {
    margin-bottom: 1.6rem;
}
</style>

<template>
    <div class="col-xl-8">
        <!-- Account details card-->
        <div class="card mb-4">
            <div class="card-header">Account Details</div>
            <div class="card-body">
                <form>
                    <!-- Form Row-->
                    <div class="row gx-3 mb-3">
                        <!-- Form Group (first name)-->
                        <div class="col-md-6">
                            <label class="small mb-1" for="inputFirstName">First name</label>
                            <input v-model="newUserData.firstName" class="form-control" id="inputFirstName" type="text" placeholder="Enter your first name">
                        </div>
                        <!-- Form Group (last name)-->
                        <div class="col-md-6">
                            <label class="small mb-1" for="inputLastName">Last name</label>
                            <input v-model="newUserData.lastName" class="form-control" id="inputLastName" type="text" placeholder="Enter your last name">
                        </div>
                    </div>
                    <!-- Form Group (email address)-->
                    <div class="col-md-6">
                        <label class="small mb-1" for="inputEmailAddress">Email address</label>
                        <input v-model="newUserData.email" class="form-control" id="inputEmailAddress" type="email" placeholder="Enter your email address">
                    </div>
                    <!-- Form Row-->
                    <div class="row gx-3 mb-3">
                        <!-- Form Group (phone number)-->
                        <div class="col-md-6">
                            <label class="small mb-1" for="inputPhone">Phone number</label>
                            <input v-model="newUserData.phoneNumber" class="form-control" id="inputPhone" type="tel" placeholder="Enter your phone number">
                        </div>
                        <!-- Form Group (address)-->
                        <div class="col-md-6">
                            <label class="small mb-1" for="inputAddress">Address</label>
                            <input v-model="newUserData.address" class="form-control" id="inputAddress" type="text" name="address" placeholder="Enter your address">
                        </div>
                    </div>
                    <!-- Save changes button-->
                    <button class="btn btn-primary" type="button" @click="updateProfile">Save changes</button>
                </form>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { useUserStore } from '@/stores/user';

const userStore = useUserStore();
const newUserData = ref({
    firstName: userStore.userData.firstName,
    lastName: userStore.userData.lastName,
    email: userStore.userData.email,
    phoneNumber: userStore.userData.phoneNumber,
    address: userStore.userData.address,
    profileImage: ''
});

function updateProfile() {
    userStore.setUserData(newUserData.value);
}
</script>

<style>
.card {
    box-shadow: 0 0.15rem 1.75rem 0 rgb(33 40 50 / 15%);
}
.card .card-header {
    font-weight: 500;
}
.card-header:first-child {
    border-radius: 0.35rem 0.35rem 0 0;
}
.card-header {
    padding: 1rem 1.35rem;
    margin-bottom: 0;
    background-color: rgba(33, 40, 50, 0.03);
    border-bottom: 1px solid rgba(33, 40, 50, 0.125);
}
.form-control, .dataTable-input {
    display: block;
    width: 100%;
    padding: 0.875rem 1.125rem;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1;
    color: #69707a;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #c5ccd6;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0.35rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
</style>

<template>
    <div class="container-xl px-4 mt-4"> 
        <div class="row "> 
            <UserProfile/>
            <EditUserProfile/>
          </div>
    </div>
</template>
  
<script setup>

</script>
  
<style>
body{
  margin-top:20px;
  background-color:#f2f6fc;
  color:#69707a;
}
</style>