Contacts App ب Vuejs 3 Darija Composition Api & Pinia الجزء الأول
فهاد ل 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>