Contacts App ب Vuejs 3 Darija Composition Api & Pinia الجزء الأول

imadbelasri Vuejs
VS

فهاد ل project الجديد غادي نقادوا Contacts App ب Vuejs 3 Darija Composition Api & Pinia فهنا الهدف ديالنا هو نعرفوا نخدموا ب Vuejs 3 composition api و Pinia لي هو واحد ل package تزاد مؤخرا كن gérer به state بحال Vuex.


نظرة سريعة بالفيديو


1- إضافة ل packages

أول حاجة زيد projet جديد غادي نخدموا ب vite لي هي واحد tool لي كتخليك تزيد les projets ديالك بطريقة سريعة وسهلة.

باش تزيد ل projet دير هاد ل commande :

npm create vite@latest my-vue-app -- --template vue

بدل my-vue-app بالإسم لي بغيتي.

منبعد ممكن ت modifier ل fichier package.json باش تزيد نفس les packages لي عندي ودير :

npm install 

الكود ديال الملف هو:

                                                    
                                                        //
{
  "name": "vuejs3-contacts-app",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "bootstrap": "^5.2.0-beta1",
    "bootstrap-icons": "^1.8.2",
    "pinia": "^2.0.14",
    "uuid": "^8.3.2",
    "vue": "^3.2.25",
    "vue-router": "^4.0.15"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.3.3",
    "vite": "^2.9.9"
  }
}
                                                    
                                                

2- إضافة Bootstrap 5 & Bootstrap 5 Icons & Vue Router & Pinia

فل fichier main.js غادي نزيد Bootstrap 5 و Bootstrap 5 Icons و Vue Router و Pinia.

الكود ديال الملف بعد التعديل :

                                                        
                                                            //
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import router from './router'
import App from './App.vue'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'
import 'bootstrap-icons/font/bootstrap-icons.css'



createApp(App)
    .use(createPinia())
    .use(router).mount('#app')
                                                        
                                                    

3- إضافة ل Pinia Store

من بعد ف src زيد dossier stores فيه fichier storeContacts.js لي غادي يكون فيه store ديالنا لي قاديناه ب Pinia.

الكود ديال الملف هو :

                                                        
                                                            //
import { defineStore } from 'pinia'

export const useContactsStore = defineStore('contacts', {
    state: () => {
        return { 
            contacts: [
                {
                    id: 'id1',
                    name: 'john doe',
                    phone: 999009900
                },
                {
                    id: 'id2',
                    name: 'mark doe',
                    phone: 445566556
                }
            ]
        }
    },
    getters: {
        contactsNumber(state) {
          return state.contacts.length
        },
        getContact(state) {
            return (id) => state.contacts.find((contact) => contact.id === id);
        },
    },
    actions: {
        addContact(contact) {
            this.contacts.unshift(contact);
        },
        updateContact(item) {
            let index = this.contacts.findIndex(contact => contact.id === item.id);
            this.contacts[index].name = item.name;
            this.contacts[index].phone = item.phone;
        },
        removeContact(id) {
            this.contacts = this.contacts.filter(contact => contact.id !== id);
        }
    },
})
                                                        
                                                    

4- إضافة Router

دائما ف src زيد dossier router فيه fichier index.js لي غادي يكونوا فيه les routes ديالنا.

الكود ديال الملف هو :

                                                        
                                                            //
import { createRouter, createWebHashHistory } from 'vue-router'
import Home from '../components/Home.vue'
import EditContact from '../components/EditContact.vue'

const router = createRouter({
    history: createWebHashHistory(),
    routes: [
        {
            path: '/',
            name: 'home',
            component: Home
        },
        {
            path: '/edit/:id',
            name: 'edit',
            component: EditContact
        }
    ]
});

export default router
                                                        
                                                    

5- إضافة Header Component

من بعد ف src زيد dossier components فيه زيد fichier سميه Header.vue ولي فيه هاد الكود :
 

                                                        
                                                            //
<template>
    <nav class="navbar navbar-expand-lg rounded mt-2" style="background-color: #e74c3c;">
        <div class="container-fluid">
            <button class="navbar-toggler text-white" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <i class="bi bi-list text-white"></i>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mx-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <router-link class="nav-link text-white" aria-current="page" to="/">
                            <i class="bi bi-house-door"></i> Home
                        </router-link>
                    </li>
                    <li class="nav-item">
                        <router-link class="nav-link text-white" to="#">
                            <i class="bi bi-people"></i> 
                            {{storeContacts.contactsNumber}}
                        </router-link>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</template>

<script setup>
import { useContactsStore } from '../stores/storeContacts';
//get store
const storeContacts = useContactsStore();
</script>