Vuejs 3 Darija Blog App الجزء الأول

imadbelasri Vuejs

فهاد ل projet الجديد غادي نقادو Vuejs 3 Darija Blog App ل App غادي تكون simple فيها فورم لي كتمكن المستخدم من إضافة ل posts من بعد ممكن للمستخدمين يزيدوا تعليقات أو إعجاب ب post معين.

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

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-blog-app-channel",
  "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.3",
    "moment": "^2.29.3",
    "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- إضافة Post Store ب Pinia

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

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

عرض الكود

                                                        
                                                            //
import { defineStore } from 'pinia'

export const usePostStore = defineStore('posts', {
    state: () => {
      return {
        posts: JSON.parse(localStorage.getItem('posts')) || []
      }
    },
    getters: {
        getPost(state){
            return (postId) => state.posts.find(post => post.id === postId);
        },
        getPosts(state){
            return state.posts;
        }
    },
    actions: {
        addPost(post){
            this.posts.unshift(post);
            localStorage.setItem('posts',JSON.stringify(this.posts));
        }
    }
})

4- إضافة Like Store ب Pinia

دائما ف dossier stores زيد fichier useLikeStore.js لي غادي يكون فيه store ديال ل likes لي قاديناه ب Pinia.

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

عرض الكود

                                                        
                                                            //
import { defineStore } from 'pinia'

export const useLikeStore = defineStore('likes', {
    state: () => {
      return {
        likes: JSON.parse(localStorage.getItem('likes')) || []
      }
    },
    getters: {
        getPostLikes(state){
            return (postId) => state.likes.filter(like => like.post_id === postId).length;
        }
    },
    actions: {
        addLike(like){
            this.likes.unshift(like);
            localStorage.setItem('likes',JSON.stringify(this.likes));
        }
    }
})

5- إضافة Comment Store ب Pinia

دائما ف dossier stores زيد fichier useCommentStore.js لي غادي يكون فيه store ديال ل comments لي قاديناه ب Pinia.

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

عرض الكود

                                                        
                                                            //
import { defineStore } from 'pinia'

export const useCommentStore = defineStore('comments', {
    state: () => {
      return {
        comments: JSON.parse(localStorage.getItem('comments')) || []
      }
    },
    getters: {
        getPostcomments(state){
            return (postId) => state.comments.filter(comment => comment.post_id === postId);
        }
    },
    actions: {
        addComment(comment){
            this.comments.unshift(comment);
            localStorage.setItem('comments',JSON.stringify(this.comments));
        }
    }
})