Vue, Vuex, और रेल्स के साथ फुल-स्टैक डेवलपमेंट में महारत: एक स्केलेबल दृष्टिकोण

स्केलेबिलिटी को ध्यान में रखते हुए फुल-स्टैक एप्लिकेशन बनाना डराने वाला हो सकता है, खासकर जब Vue और Vuex के नवीनतम संस्करण के साथ निर्माण किया जा रहा हो, जिसमें पूर्ण टाइपस्क्रिप्ट समर्थन है। यह लेख अपने पाठकों को Vuex 4.0 के साथ स्टेट मैनेजमेंट से लेकर API अनुरोधों और डेटाबेस इंटरैक्शन को संभालने तक, एक CRUD एप्लिकेशन की खोज करके स्केलेबल फुल-स्टैक एप्लिकेशन बनाने के बारे में जानने के लिए आवश्यक सब कुछ सिखाएगा जो अस्वस्थ पशुधन के उपचार के नुस्खे का प्रबंधन करता है। बैकएंड रेल्स के साथ बनाया जाएगा, जो फ्रंटएंड द्वारा एकीकरण के लिए बुनियादी CRUD API को उजागर करेगा।

अधिकांश कंपनियों ने API-आधारित विकास आर्किटेक्चर को अपनाया है क्योंकि यह फ्रंटएंड डेवलपमेंट टीम को विकास के लिए उपयुक्त फ्रंटएंड टूल चुनने में अधिक लचीलापन देता है। हालांकि यह सबसे अच्छा विकल्प नहीं हो सकता है, यह एक विश्वसनीय विकल्प रहा है, और कई कंपनियों ने इस विकास आर्किटेक्चर को अपनाया है क्योंकि यह टीम में अधिक लचीलापन जोड़ता है।

पूर्वापेक्षाएँ

शुरू करने से पहले, सुनिश्चित करें कि इस ट्यूटोरियल के साथ बने रहने के लिए आपके पास निम्नलिखित हैं:

• रेल्स V6.x
• Node.js V10.x
• रूबी ऑन रेल्स का पूर्व कार्य ज्ञान
• टाइपस्क्रिप्ट का पूर्व कार्य ज्ञान
• Vue.js का पूर्व कार्य ज्ञान

हम क्या बनाएंगे

इस ट्यूटोरियल में, हम एक फुल-स्टैक CRUD एप्लिकेशन बनाएंगे जो अस्वस्थ पशुधन के उपचार के नुस्खे का प्रबंधन करता है। उपयोगकर्ता पशुधन के लिए नुस्खे बनाने, अपडेट करने और हटाने में सक्षम होंगे। CRUD API को रेल्स का उपयोग करके बनाया जाएगा, जो फ्रंटएंड द्वारा एकीकरण के लिए CRUD API को उजागर करेगा, जिसे Vue 3 के साथ बनाया जाएगा। इनमें से प्रत्येक स्टैक अलग-अलग पोर्ट पर स्वतंत्र एप्लिकेशन के रूप में चलेगा।

फुल-स्टैक ऐप की बुनियादी आर्किटेक्चर

हमारा फुल-स्टैक एप्लिकेशन क्लाइंट और सर्वर एप्लिकेशन दोनों से बना है जो स्वतंत्र रूप से चल रहे हैं, क्लाइंट एप्लिकेशन के प्रत्येक घटक Vuex के माध्यम से सर्वर एप्लिकेशन द्वारा जारी CRUD API के साथ बातचीत कर रहे हैं ताकि एप्लिकेशन स्टेट का उचित प्रबंधन हो सके। बैकएंड एप्लिकेशन सभी नुस्खा डेटा को Sqlite 3 डेटाबेस में संग्रहीत करता है जबकि फ्रंटएंड एप्लिकेशन को CRUD API उजागर करता है।

बैकएंड सर्विस सेटअप

अपनी पसंद के फोल्डर में, निम्न कमांड चलाकर एक रेल्स ऐप बनाएं:

rails new vet_clinic_api --api 

यह रेल्स को इस प्रोजेक्ट को API के रूप में बनाने के लिए कहेगा, जिससे सभी फ्रंटएंड निर्भरताएं (व्यू फाइलें) हट जाएंगी।

डेटाबेस कॉन्फ़िगरेशन

हम Sqlite 3 का उपयोग करेंगे, जो रेल्स एप्लिकेशन के लिए डिफ़ॉल्ट डेटाबेस है।

rails g scaffold prescriptions vet_prescription:text prescribed_by:text disease:text livestock:text completed:boolean 

उपरोक्त कमांड चलाकर, रेल्स हमारे माइग्रेशन, टेस्ट, मॉडल, कंट्रोलर, रूट के लिए एक प्रारंभिक संरचना को स्कैफोल्ड करेगा:

rails db:migrate 

यह कमांड हमारे टेबल्स को डेटाबेस में जोड़ देगा।

डेटाबेस को सीड करना

आइए अपने डेटाबेस को कुछ नुस्खा डेटा के साथ सीड करें। db/migrate/seed.rb में नीचे दिए गए कोड स्निपेट को जोड़ें

//db/migrate/seed.rb 
Prescription.destroy_all 
Prescription.create!([{ 
  vet_prescription:"Achyranthes aspera", 
  prescribed_by:"Dr Chucks", 
  disease:"Rabbies", 
  livestock:"goat", 
  completed:false 
}, { 
  vet_prescription:"Achyranthes aspera", 
  prescribed_by:"Dr Rex", 
  disease:"Rabbies", 
  livestock:"Dog", 
  completed:false 
}, { 
  vet_prescription:"ethnovet", 
  prescribed_by:"Dr Chucks", 
  disease:"Pox", 
  livestock:"Sheep", 
  completed:false 
}]) 
p "Created #{Prescription.count} prescriptions" 

यह फाइल डेटाबेस को सीड करने के लिए प्रारंभिक डेटा संग्रहीत करेगी ताकि जब ऐप शुरू हो, तो हमारे पास कुछ मौजूदा नुस्खा डेटा होगा।

निम्न कमांड चलाएं db/migrate/seed.rb में कोड निष्पादित करने के लिए, जो डेटाबेस को कुछ पूर्वनिर्धारित नुस्खा डेटा के साथ सीड करता है:

rails db:seed 

इन कुछ कमांड्स के साथ, हमने रेल्स के साथ एक कार्यात्मक CRUD API बनाया। यह कितना आसान था? (मुस्कान)

CORS कॉन्फ़िगरेशन

चूंकि हम अपने CRUD API को फ्रंटएंड के लिए उजागर करेंगे, और फ्रंटएंड और बैकएंड दोनों सर्वर अलग-अलग पोर्ट पर चलेंगे, हमें फ्रंटएंड और बैकएंड के बीच डेटा शेयरिंग तक पहुंच प्रदान करने के लिए रेल्स बैकएंड पर CORS कॉन्फ़िगरेशन सेट अप करने की आवश्यकता है।

प्रोजेक्ट रूट में Gemfile का पता लगाएं और निम्न कोड लाइन को अनकमेंट करें:

# gem 'rack-cors' 

config/environments/initializers/cors.rb में निम्न कोड जोड़ें:

//config/environments/initializers/cors.rb 
Rails.application.config.middleware.insert_before 0, Rack::Cors do 
  allow do 
    origins '*' 
    resource '*', headers: :any, methods: [:get, :post, :put, :patch, :delete, :options, :head] 
  end 
end 

उपरोक्त स्निपेट किसी भी पोर्ट पर चल रहे फ्रंटएंड ऐप्स से रेल्स CRUD API को सुलभ बनाता है।

रेल्स सर्वर शुरू करने के लिए निम्न कमांड चलाएं:

rails s 

सभी नुस्खे के लिए JSON प्रतिक्रिया प्राप्त करने के लिए localhost:3000/prescriptions पर जाएं।

यदि आप ऐसे क्लाइंट्स के साथ काम कर रहे हैं जो अपने प्रोजेक्ट्स के वर्कफ़्लो को बार-बार बदलते हैं तो रेल्स का उपयोग करने पर विचार करें। रेल्स के साथ, कुछ कमांड और कोड लाइन्स के साथ सुविधाओं को लागू करना आसान है। यह मेरी व्यक्तिगत राय है, हालांकि।

Vue का परिचय

Vue यूज़र इंटरफेस बनाने के लिए एक प्रोग्रेसिव फ्रेमवर्क है। Vue वर्चुअल DOM, रेंडर फंक्शन्स, और सर्वर-साइड रेंडरिंग क्षमताओं जैसी अवधारणाओं को पेश करता है ताकि वेब एप्लिकेशन के लिए महत्वपूर्ण प्रदर्शन अनुकूलन प्रदान किया जा सके।

Vue 3 डेवलपर्स के लिए बहुत सारी नई सुविधाओं और परिवर्तनों के साथ आता है। ये सुविधाएं फ्रेमवर्क की समग्र स्थिरता, साथ ही इसकी गति और रखरखाव में सुधार करने के लिए डिज़ाइन की गई हैं।

हम कंपोज़िशन API का उपयोग करेंगे, जो Vue 3 की सबसे प्रत्याशित विशेषताओं में से एक है। यह Vue कंपोनेंट्स बनाने का एक नया तरीका है, कोड लिखने के लिए एक अधिक संगठित और कुशल दृष्टिकोण के साथ, और पूर्ण टाइपस्क्रिप्ट टाइप-चेकिंग समर्थन।

Vuex का परिचय

Vuex Vue टीम द्वारा बनाया गया एक स्टेट मैनेजमेंट लाइब्रेरी है, और यह Redux के समान फ्लक्स आर्किटेक्चर पर आधारित है। यह विशेष रूप से Vue के लिए डिज़ाइन किया गया है और आपके स्टोर के बेहतर संगठन की अनुमति देता है। यदि आपका Vue एप्लिकेशन स्टेट बढ़ने के साथ अधिक जटिल हो जाता है तो Vuex महत्वपूर्ण हो जाएगा। Vuex का नवीनतम स्थिर रिलीज़, v4.0.0, Vue 3 में पेश किए गए कंपोज़िशन API का समर्थन करता है, साथ ही टाइपस्क्रिप्ट के लिए अधिक मजबूत इन्फरेंस।

फ्रंटएंड एप्लिकेशन सेट करना

फ्रंटएंड को Vue 3 और टाइपस्क्रिप्ट के साथ सेट किया जाएगा, जबकि Vuex का उपयोग एप्लिकेशन स्टेट मैनेजमेंट के लिए किया जाएगा।

आइए Vue-CLI टूल का उपयोग करके टाइपस्क्रिप्ट और Vuex समर्थन के साथ एक Vue 3 ऐप बनाकर शुरू करें।

निम्न कमांड के साथ Vue-CLI टूल को वैश्विक रूप से इंस्टॉल करें:

npm install --global @vue/cli 

नीचे दिए गए कमांड के साथ टाइपस्क्रिप्ट और Vuex समर्थन के साथ एक नया Vue 3 ऐप बनाएं:

vue create vet_clinic_frontend 

मैन्युअली सेलेक्ट फीचर विकल्प चुनें और निम्न विकल्पों को चुनने के लिए स्पेस कुंजी दबाएं:

• Vue संस्करण चुनें
• Babel
• TypeScript
• लिंटर / फॉर्मेटर

अगला, प्रोजेक्ट के लिए संस्करण के रूप में Vue 3.x(Preview) चुनें।

• क्लास-स्टाइल कंपोनेंट सिंटैक्स का उपयोग करने के लिए हां दर्ज करें।
• टाइपस्क्रिप्ट के साथ Babel का उपयोग करने के लिए हां दर्ज करें।
• अपनी पसंद का कोई भी लिंटर चुनें।

एक बार Vue 3 ऐप सफलतापूर्वक उत्पन्न हो जाने पर, हमारे पास Vuex (V4.x) और पूर्ण टाइपस्क्रिप्ट समर्थन के साथ एक Vue 3 प्रोजेक्ट सेटअप होगा।

हम टाइपस्क्रिप्ट का उपयोग करके एप्लिकेशन में टाइप सेफ्टी जोड़ेंगे। डेवलपमेंट सर्वर शुरू करने के लिए, अपने टर्मिनल में नीचे दिए गए कमांड को चलाएं और अपने ब्राउज़र में https://localhost:8080 पर जाकर अपने प्रोजेक्ट का पूर्वावलोकन करें।

हम अपने एप्लिकेशन को स्टाइल करने के लिए Bulma CSS फ्रेमवर्क का उपयोग करेंगे। Bulma CSS इंस्टॉल करने के लिए निम्न कमांड चलाएं:

npm install bulma 

Bulma CSS आयात करने के लिए, App.vue में निम्न कोड जोड़ें:

//App.vue 
<style lang="scss"> 
  @import "~bulma/css/bulma.css"; 
</style> 

एप्लिकेशन स्टोर सेट करना

एप्लिकेशन स्टोर को Vuex के साथ सेट किया जाएगा। स्टोर में परिवर्तन करने के लिए, कंपोनेंट से एक्शन डिस्पैच किए जाएंगे, जो म्यूटेशन को ट्रिगर करेंगे, जिससे स्टोर अपडेट होगा।

एप्लिकेशन स्टोर सेट करने के लिए निम्न चरण लें:

1. स्टेट ऑब्जेक्ट्स बनाएं।
2. हमारे एप्लिकेशन में होने वाले म्यूटेशन सेट करें।
3. उन बाद के म्यूटेशन को कमिट करने वाले एक्शन बनाएं।
4. कंपोनेंट्स के लिए स्टेट डेटा को सीधे गणना करने के लिए गेटर्स बनाएं।

स्टेट

एक स्टेट एक स्टोर ऑब्जेक्ट है जो एप्लिकेशन-लेवल डेटा रखता है जिसे सभी कंपोनेंट्स द्वारा एक्सेस करने की आवश्यकता होती है।

state.ts फाइल को स्टोर डायरेक्टरी में निम्न कोड स्निपेट के साथ बनाएं:

//src/store/state.ts 
export type Prescription = { 
  id: number; 
  vet_prescription: string; 
  prescribed_by: string; 
  disease: string; 
  livestock: string; 
  completed: boolean; 
  editing: boolean; 
}; 
export type Data = { 
  vet_prescription: string; 
  prescribed_by: string; 
  disease: string; 
  livestock: string; 
}; 
export type State = { 
  loading: boolean; 
  prescriptions: Prescription[]; 
  data: Data | null; 
  showCreateModal: boolean; 
  showEditModal: boolean; 
  showPrescriptionModal: boolean; 
  editModalPrescriptionId: number | undefined; 
  showPrescriptionId: number | undefined; 
}; 
export const state: State = { 
  loading: false, 
  prescriptions: [], 
  data: null, 
  showCreateModal: false, 
  showEditModal: false, 
  showPrescriptionModal: false, 
  editModalPrescriptionId: undefined, 
  showPrescriptionId: undefined, 
}; 

यहां, हम Prescription और Data में कुछ टाइप सेफ्टी जोड़ते हैं। हम प्रकारों को एक्सपोर्ट भी करते हैं क्योंकि वे गेटर्स, म्यूटेशन, और एक्शन की परिभाषाओं में उपयोग किए जाएंगे। अंत में, हम State प्रकार को स्टेट पर कास्ट करते हैं।

म्यूटेशन

म्यूटेशन वे मेथड्स हैं जो ट्रिगर होने पर स्टोर को संशोधित करते हैं। वे स्टेट को पहले तर्क के रूप में और पेलोड को दूसरे के रूप में प्राप्त करते हैं, अंततः पेलोड के साथ एप्लिकेशन स्टेट को संशोधित करते हैं। म्यूटेशन बनाने के लिए, Vuex डॉक्स म्यूटेशन प्रकारों के लिए स्थिरांक का उपयोग करने की सलाह देते हैं।

mutations.ts फाइल को स्टोर डायरेक्टरी में निम्न कोड स्निपेट के साथ बनाएं:

//src/store/mutations.ts 
import { MutationTree } from "vuex"; 
import { State, Prescription, Data } from "./state"; 
export enum MutationType { 
  CreatePrescription = "CREATE_PRESCRIPTION", 
  SetPrescriptions = "SET_PRESCRIPTIONS", 
  CompletePrescription = "COMPLETE_PRESCRIPTION", 
  RemovePrescription = "REMOVE_PRESCRIPTION", 
  EditPrescription = "EDIT_PRESCRIPTION", 
  UpdatePrescription = `UPDATE_PRESCRIPTION`, 
  SetLoading = "SET_LOADING", 
  SetCreateModal = "SET_CREATE_MODAL", 
  SetEditModal = "SET_EDIT_MODAL", 
  SetPrescriptionModal = "SET_PRESCRIPTION_MODAL", 
} 

उपरोक्त स्निपेट हमारे ऐप में म्यूटेशन के सभी संभावित नामों को रखने के लिए enum सिंबल का उपयोग करता है।

अगला, हम प्रत्येक MutationType के लिए एक अनुबंध (प्रकार) घोषित करेंगे, जैसे:

//src/store/mutation.ts 
export type Mutations = { 
  [MutationType.CreatePrescription](state: State, prescription: Data): void; 
  [MutationType.SetPrescriptions](state: State, prescription: Prescription[]): void; 
  [MutationType.CompletePrescription](state: State, prescription: Partial<Prescription> & { id: number }): void; 
  [MutationType.RemovePrescription](state: State, prescription: Partial<Prescription> & { id: number }): void; 
  [MutationType.EditPrescription](state: State, prescription: Partial<Prescription> & { id: number }): void; 
  [MutationType.UpdatePrescription](state: State, prescription: Partial<Prescription> & { id: number }): void; 
  [MutationType.SetLoading](state: State, value: boolean): void; 
  [MutationType.SetCreateModal](state: State, value: boolean): void; 
  [MutationType.SetEditModal](state: State, value: { showModal: boolean; prescriptionId: number | undefined }): void; 
  [MutationType.SetPrescriptionModal](state: State, value: { showModal: boolean; prescriptionId: number | undefined }): void; 
}; 

फिर, हम प्रत्येक MutationType के लिए घोषित अनुबंधों को लागू करेंगे, जैसे:

//src/store/mutation.ts 
export const mutations: MutationTree<State> & Mutations = { 
  [MutationType.CreatePrescription](state, prescription) { 
    state.data == prescription; 
  }, 
  [MutationType.SetPrescriptions](state, prescriptions) { 
    state.prescriptions = prescriptions; 
  }, 
  [MutationType.CompletePrescription](state, newPrescription) { 
    const prescription = state.prescriptions.findIndex((prescription) => prescription.id === newPrescription.id); 
    if (prescription === -1) return; 
    state.prescriptions[prescription] = { ...state.prescriptions[prescription], ...newPrescription }; 
  }, 
  [MutationType.RemovePrescription](state, Prescription) { 
    const prescription = state.prescriptions.findIndex((prescription) => prescription.id === Prescription.id); 
    if (prescription === -1) return; 
    //यदि नुस्खा स्टेट में मौजूद है, तो इसे हटा दें 
    state.prescriptions.splice(prescription, 1); 
  }, 
  [MutationType.EditPrescription](state, Prescription) { 
    const prescription = state.prescriptions.findIndex((prescription) => prescription.id === Prescription.id); 
    if (prescription === -1) return; 
    //यदि नुस्खा स्टेट में मौजूद है, तो एडिटिंग प्रॉपर्टी को टॉगल करें 
    state.prescriptions[prescription] = { ...state.prescriptions[prescription], editing: !state.prescriptions[prescription].editing }; 
    console.log("prescription", state.prescriptions[prescription]); 
  }, 
  [MutationType.UpdatePrescription](state, Prescription) { 
    state.prescriptions = state.prescriptions.map((prescription) => { 
      if (prescription.id === Prescription.id) { 
        return { ...prescription, ...Prescription }; 
      } 
      return prescription; 
    }); 
  }, 
  [MutationType.SetLoading](state, value) { 
    state.loading = value; 
  }, 
  [MutationType.SetCreateModal](state, value) { 
    state.showCreateModal = value; 
  }, 
  [MutationType.SetEditModal](state, value) { 
    state.showEditModal = value.showModal; 
    state.editModalPrescriptionId = value.prescriptionId; 
  }, 
  [MutationType.SetPrescriptionModal](state, { showModal, prescriptionId }) { 
    state.showPrescriptionModal = showModal; 
    state.showPrescriptionId = prescriptionId; 
  }, 
}; 

MutationTree Vuex पैकेज के साथ शिप किया गया एक जेनेरिक प्रकार है। हमने इसका उपयोग उपरोक्त स्निपेट में म्यूटेशन ट्री के प्रकार की घोषणा करने के लिए किया। म्यूटेशन ट्री और म्यूटेशन यह सुनिश्चित करते हैं कि अनुबंध सही ढंग से लागू किया गया है; अन्यथा, टाइपस्क्रिप्ट एक त्रुटि ट्रिगर करेगा।

एक्शन

एक्शन वे मेथड्स हैं जो म्यूटेशन को ट्रिगर करते हैं। एसिंक्रोनस कार्यों को संभालते समय, जैसे API को अनुरोध करना, संबंधित म्यूटेशन को API प्रतिक्रिया के साथ पेलोड के रूप में कॉल करने से पहले एक्शन का उपयोग किया जाता है। जैसे ही हम अपने एक्शन बनाते हैं, हमें इस परिदृश्य के लिए एक स्पष्ट कार्यान्वयन मिलेगा।

एक्शन बनाने से पहले, हम Axios इंस्टॉल करेंगे ताकि रेल्स सर्वर पर हमारे सभी HTTP अनुरोधों को संभाला जा सके, जैसे:

npm install axios --save 

actions.ts फाइल को स्टोर डायरेक्टरी में निम्न कोड स्निपेट के साथ बनाएं:

//src/store/actions.ts 
import { ActionContext, ActionTree } from "vuex"; 
import { Mutations, MutationType } from "./mutations"; 
import { State, Prescription, Data } from "./state"; 
import axios from "axios"; 
const apiUrl = "https://localhost:3000/prescriptions"; 
export enum ActionTypes { 
  GetPrescriptions = "GET_PRESCRIPTIONS", 
  SetCreateModal = "SET_CREATE_MODAL", 
  SetEditModal = "SET_EDIT_MODAL", 
  RemovePrescription = "REMOVE_PRESCRIPTION", 
  CreatePrescription = "CREATE_PRESCRIPTION", 
  UpdatePrescription = "UPDATE_PRESCRIPTION", 
} 

इसी तरह, उपरोक्त स्निपेट हमारे ऐप में एक्शन के सभी संभावित नामों को रखने के लिए enum सिंबल का उपयोग करता है।

अगला, हम प्रत्येक ActionType के लिए एक अनुबंध (प्रकार) घोषित करेंगे, जैसे:

//src/store/actions.ts 
type ActionAugments = Omit<ActionContext<State, State>, "commit"> & { 
  commit<K extends keyof Mutations>(key: K, payload: Parameters<Mutations[K]>[1]): ReturnType<Mutations[K]>; 
}; 
export type Actions = { 
  [ActionTypes.GetPrescriptions](context: ActionAugments): void; 
  [ActionTypes.SetCreateModal](context: ActionAugments): void; 
  [ActionTypes.SetEditModal](context: ActionAugments): void; 
  [ActionTypes.RemovePrescription](context: ActionAugments, Prescription: { id: number }): void; 
  [ActionTypes.CreatePrescription](context: ActionAugments, data: Data): void; 
  [ActionTypes.UpdatePrescription](context: ActionAugments, prescription: Prescription): void; 
}; 

ActionAugments प्रकार सभी कमिट्स को केवल उनके घोषित म्यूटेशन तक सीमित करता है और पेलोड प्रकार की जांच भी करता है।

अगला, हम प्रत्येक ActionType के लिए घोषित अनुबंध (प्रकार) को लागू करेंगे। action.ts फाइल में नीचे दिए गए कोड को जोड़ें:

//src/store/actions.ts 
export const actions: ActionTree<State, State> & Actions = { 
  async [ActionTypes.GetPrescriptions]({ commit }) { 
    commit(MutationType.SetLoading, true); 
    const response = await axios.get(apiUrl); 
    commit(MutationType.SetLoading, false); 
    commit(MutationType.SetPrescriptions, response.data); 
  }, 
  async [ActionTypes.SetCreateModal]({ commit }) { 
    commit(MutationType.SetCreateModal, true); 
  }, 
  async [ActionTypes.SetEditModal]({ commit }) { 
    commit(MutationType.SetEditModal, { showModal: true, prescriptionId: 1 }); 
  }, 
  //आशावादी अपडेट 
  async [ActionTypes.RemovePrescription]({ commit }, Prescription) { 
    if (Prescription != undefined) { 
      commit(MutationType.RemovePrescription, Prescription); 
    } 
    const response = await axios.delete(`${apiUrl}/${Prescription.id}`); 
  }, 
  async [ActionTypes.CreatePrescription]({ commit, dispatch }, Prescription) { 
    const response = await axios.post(apiUrl, Prescription); 
    dispatch(ActionTypes.GetPrescriptions); 
  }, 
  async [ActionTypes.UpdatePrescription]({ commit, dispatch }, Prescription) { 
    if (Prescription != undefined) { 
      commit(MutationType.UpdatePrescription, Prescription); 
      const response = await axios.patch(`${apiUrl}/${Prescription.id}`, Prescription); 
      dispatch(ActionTypes.GetPrescriptions); 
    } 
  }, 
}; 

यहां, हमने एक एक्शन वेरिएबल बनाया जो सभी कार्यान्वित एक्शन को संग्रहीत करता है। इसी तरह, ActionTree<State> & Actions यह सुनिश्चित करता है कि अनुबंध (type Actions) सही ढंग से लागू किया गया है; अन्यथा, टाइपस्क्रिप्ट एक त्रुटि ट्रिगर करेगा।

हमने GetPrescriptions एक्शन में रेल्स API एंडपॉइंट पर अपना एसिंक्रोनस कॉल सेट किया और प्रतिक्रिया डेटा को पेलोड के रूप में SetPrescriptions म्यूटेशन प्रकार को ट्रिगर किया। हमने SetCreateModal, SetEditModal, CreatePrescription, UpdatePrescription, और RemovePrescription एक्शन भी सेट किए।

गेटर्स

गेटर्स वे मेथड्स हैं जो स्टेट को अपने पहले पैरामीटर के रूप में प्राप्त करते हैं और स्टोर स्टेट से गणना की गई जानकारी लौटाते हैं।

getters.ts फाइल को स्टोर डायरेक्टरी में निम्न कोड स्निपेट के साथ बनाएं:

//src/store/getters.ts 
import { GetterTree } from "vuex"; 
import { State, Prescription } from "./state"; 
export type Getters = { 
  completedPrescriptionCount(state: State): number; 
  totalPrescriptionCount(state: State): number; 
  getPrescriptionById(state: State): (id: number) => Prescription | undefined; 
}; 
export const getters: GetterTree<State, State> & Getters = { 
  completedPrescriptionCount(state) { 
    return state.prescriptions.filter((prescription) => prescription.completed).length; 
  }, 
  totalPrescriptionCount(state) { 
    return state.prescriptions.length; 
  }, 
  getPrescriptionById: (state) => (id: number) => { 
    return state.prescriptions.find((prescription) => prescription.id === id); 
  }, 
}; 

उपरोक्त कोड स्निपेट निम्नलिखित गेटर्स को परिभाषित करता है:

• completedPrescriptionCount – एक फंक्शन जो हमारे स्टेट में पूर्ण नुस्खे की कुल संख्या प्राप्त करता है।
• totalPrescriptionCount – एक फंक्शन जो हमारे स्टेट में नुस्खे की कुल संख्या प्राप्त करता है।
• getPrescriptionById – एक फंक्शन जो उसके ID द्वारा एक नुस्खा प्राप्त करता है।

हमने गेटर्स में कुछ टाइप सेफ्टी भी जोड़ी है।

स्टोर

आइए हमारे state, mutations, actions, और getters को ग्लोबल Vuex स्टोर से जोड़ें। हम store/index.ts को निम्नानुसार अपडेट करेंगे:

//src/store/index.ts 
import { createStore, Store as VuexStore, CommitOptions, DispatchOptions, createLogger } from "vuex"; 
import { State, state } from "./state"; 
import { Mutations, mutations } from "./mutations"; 
import { Actions, actions } from "./actions"; 
import { Getters, getters } from "./getters"; 
export const store = createStore<State>({ 
  plugins: process.env.NODE_ENV === "development" ? [createLogger()] : [], 
  state, 
  mutations, 
  actions, 
  getters, 
}); 
export function useStore() { 
  return store as Store; 
} 
export type Store = Omit<VuexStore<State>, "getters" | "commit" | "dispatch"> 
  & { 
    commit<K extends keyof Mutations, P extends Parameters<Mutations[K]>[1]>(key: K, payload: P, options?: CommitOptions): ReturnType<Mutations[K]>; 
  } 
  & { 
    dispatch<K extends keyof Actions>(key: K, payload?: Parameters<Actions[K]>[1], options?: DispatchOptions): ReturnType<Actions[K]>; 
  } 
  & { 
    getters: { 
      [K in keyof Getters]: ReturnType<Getters[K]>; 
    }; 
  }; 

state, mutations, actions, और getters को createStore मेथड में उन्हें含む एक ऑब्जेक्ट पास करके एक स्टोर बनाने के लिए आवश्यक है। विकास के दौरान, createLogger प्लगइन स्टेट (पिछला स्टेट और अगला स्टेट) और म्यूटेशन को कंसोल पर लॉग करता है। हमारे एप्लिकेशन के सभी कंपोनेंट्स में स्टोर को सुलभ बनाने के लिए; हमें इसे पूरे एप्लिकेशन में इंजेक्ट करने की आवश्यकता है। सौभाग्य से, Vue-CLI टूल ने पहले से ही पूरे स्टोर को आयात किया है और इसे एप्लिकेशन के Vue इंस्टेंस के भीतर पास किया है।

Vuex स्टोर को कंपोनेंट में एकीकृत करना

इस ट्यूटोरियल में, Vue 3 कंपोज़िशन API का उपयोग हमारे फ्रंटएंड एप्लिकेशन में सभी कंपोनेंट्स बनाने के लिए किया जाएगा।

ऐप कंपोनेंट

हमारा फ्रंटएंड लॉन्च होते ही नुस्खा डेटा की एक सूची रेंडर करना चाहिए। हम कंपोनेंट के mounted() लाइफसाइकिल हुक के भीतर GetPrescription एक्शन को डिस्पैच करेंगे। स्टोर को एक कंपोनेंट के भीतर एक्सेस करने के लिए, useStore हुक, जो हमारे स्टोर को लौटाता है, निष्पादित किया जाएगा।

//src/App.vue 
<script lang="ts"> 
import { computed, defineComponent, onMounted } from "vue"; 
import PrescriptionList from "./components/PrescriptionList.vue"; 
import { useStore } from "./store"; 
import { ActionTypes } from "./store/actions"; 
export default defineComponent({ 
  components: { PrescriptionList }, 
  setup() { 
    const store = useStore(); 
    const loading = computed(() => store.state.loading); 
    onMounted(() => store.dispatch(ActionTypes.GetPrescriptions)); 
    const completedCount = computed(() => store.getters.completedPrescriptionCount); 
    const totalCount = computed(() => store.getters.totalPrescriptionCount); 
    return { loading, completedCount, totalCount }; 
  }, 
}); 
</script> 
<template> 
  <nav class="navbar" role="navigation" aria-label="main navigation"> 
    <div class="navbar-brand"> 
      <a class="navbar-item" href="https://bulma.io"> 
        <img src="https://bulma.io/images/bulma-logo.png" width="112" height="28" /> 
      </a> 
    </div> 
    <div id="navbarBasicExample" class="navbar-menu"> 
      <div class="navbar-start"> 
        <a class="navbar-item"> Home </a> 
        <a class="navbar-item"> About </a> 
      </div> 
    </div> 
  </nav> 
  <div class="container mx-auto mt-4"> 
    <h1 class="is-size-3 has-text-centered p-2 has-text-weight-bold is-success">Vet clinic Frontend</h1> 
    <h3 class="has-text-centered p-2">Manage records of treated livestock in your farm</h3> 
    <div v-if="loading"> 
      <h3 class="has-text-centered mt-4">Loading...</h3> 
    </div> 
    <div v-else> 
      <p class="has-text-centered mt-2">{{ completedCount }} of {{ totalCount }} treated.</p> 
      <PrescriptionList /> 
    </div> 
  </div> 
</template> 
<style> 
  @import "~bulma/css/bulma.css"; 
</style> 

यहां, हमने तीन कंप्यूटेड प्रॉपर्टीज़ बनाई हैं:

• completedCount, जो पूर्ण उपचारों की कुल संख्या प्राप्त करने के लिए completedPrescriptionCount गेटर मेथड को कॉल करता है।
• totalCount, जो नुस्खे की कुल संख्या प्राप्त करने के लिए totalPrescriptionCount गेटर मेथड को कॉल करता है।
• loading, जो स्टेट की लोडिंग प्रॉपर्टी प्राप्त करता है।

Vue 3 कंपोज़िशन API के साथ, टेम्पलेट द्वारा आवश्यक मेथड्स और प्रॉपर्टीज़ को एक्सेसिबल होने के लिए लौटाया जाना चाहिए। ध्यान दें कि हमने loading, completedCount, and totalCount कैसे लौटाया है।

PrescriptionList कंपोनेंट

यह कंपोनेंट बैकएंड से नुस्खे की सूची प्राप्त करने और नुस्खा डेटा को इसके चाइल्ड कंपोनेंट में पास करने के लिए जिम्मेदार होगा।

निम्न कोड के साथ कंपोनेंट्स फोल्डर के अंदर PrescriptionList.vue बनाएं:

//src/components/PrescriptionList.vue 
<template> 
  <table class="table is-hoverable is-striped"> 
    <thead> 
      <tr> 
        <th><abbr title="Position">Prescription Id</abbr></th> 
        <th>Treated</th> 
        <th>Prescription</th> 
        <th><abbr title="Won">Prescribed By</abbr></th> 
        <th><abbr title="Drawn">Disease</abbr></th> 
        <th><abbr title="Drawn">Livestock</abbr></th> 
        <th><abbr title="Lost">Actions</abbr></th> 
      </tr> 
    </thead> 
    <tbody v-if="prescriptions"> 
      <tr v-for="prescription in prescriptions" :key="prescription.id"> 
        <PrescriptionListItem v-bind="prescription" /> 
      </tr> 
    </tbody> 
    <tfoot> 
      <CreateModal v-show="showCreateModal"></CreateModal> 
      <button class="button is-success" @click="setModal">Create Prescription</button> 
    </tfoot> 
  </table> 
  <EditModal v-if="showEditModal" :id="editModalPrescriptionId"></EditModal> 
  <Prescription v-if="showPrescriptionModal" :id="showPrescriptionId"></Prescription> 
</template> 
<script> 
import CreateModal from "./CreateModal"; 
import EditModal from "./EditModal"; 
import Prescription from "./Prescription"; 
import PrescriptionListItem from "./PrescriptionListItem"; 
import { defineComponent, computed } from "vue"; 
import { useStore } from "@/store"; 
import { MutationType } from "@/store/mutations"; 
export default defineComponent({ 
  name: "Table", 
  components: { CreateModal, PrescriptionListItem, Prescription, EditModal, }, 
  setup() { 
    const store = useStore(); 
    const setModal = () => { 
      store.commit(MutationType.SetCreateModal, true); 
    }; 
    const showCreateModal = computed(() => store.state.showCreateModal); 
    const showEditModal = computed(() => store.state.showEditModal); 
    const editModalPrescriptionId = computed(() => store.state.editModalPrescriptionId); 
    const showPrescriptionModal = computed(() => store.state.showPrescriptionModal); 
    const showPrescriptionId = computed(() => store.state.showPrescriptionId); 
    const prescriptions = computed(() => store.state.prescriptions); 
    return { showCreateModal, setModal, prescriptions, showEditModal, showPrescriptionModal, editModalPrescriptionId, showPrescriptionId }; 
  }, 
}); 
</script> 
<style scoped> 
table { width: 100%; } 
.fa { font-size: 1.2rem; margin-left: 15px; } 
.fa:hover { font-size: 1.4rem; } 
</style> 

setModal मेथड उस म्यूटेशन को आमंत्रित करता है जो स्टेट में showCreateModal को सच पर सेट करता है, जिसके परिणामस्वरूप नुस्खे बनाने के लिए मॉडल लॉन्च होता है।

हमने निम्नलिखित कंप्यूटेड प्रॉपर्टीज़ बनाई हैं:

• showCreateModal, जो स्टेट की showCreateModal प्रॉपर्टी प्राप्त करता है।
• showEditModal, जो स्टेट की showEditModal प्रॉपर्टी प्राप्त करता है।
• showPrescriptionModal, जो स्टेट की showPrescriptionModal प्रॉपर्टी प्राप्त करता है।
• prescription, जो स्टेट से नुस्खे की सूची प्राप्त करता है।
• showPrescriptionId, जो स्टेट की showPrescriptiond प्रॉपर्टी प्राप्त करता है।
• editPrescriptionId, जो स्टेट की editPrescriptionId प्रॉपर्टी प्राप्त करता है।

Prescription कंपोनेंट

यह कंपोनेंट PrescriptionList कंपोनेंट से प्रॉप के रूप में नुस्खा ID प्राप्त करेगा। ID प्रॉप्स का उपयोग getPrescriptionById गेटर्स मेथड के माध्यम से संबंधित ID वाले नुस्खे को लाने और ब्राउज़र में नुस्खा गुणों को रेंडर करने के लिए किया जाएगा।

निम्न कोड के साथ कंपोनेंट्स फोल्डर के अंदर Prescription.vue बनाएं:

//src/components/Prescription.vue 
<template> 
  <div class="modal is-active"> 
    <div class="modal-background"></div> 
    <div class="modal-content"> 
      <h1>VIEW PRESCRIPTION</h1> 
      <div class="card"> 
        <div class="card-content"> 
          <div class="media"> 
            <div class="media-content"> 
              <p class="title is-4">Livestock: {{ prescription.livestock }}</p> 
              <p class="subtitle is-6"><b>Prescribed by:</b> {{ prescription.prescribed_by }}</p> 
              <p class="subtitle is-6"><b>Disease:</b> {{ prescription.disease }}</p> 
            </div> 
          </div> 
          <div class="content"> 
            <p class="subtitle is-6">Prescription: {{ prescription.vet_prescription }}</p> 
          </div> 
        </div> 
      </div> 
    </div> 
    <button class="modal-close is-large" @click="closeModal" aria-label="close"></button> 
  </div> 
</template> 
<script lang="ts"> 
import { computed } from "vue"; 
import { useStore } from "@/store"; 
import { MutationType } from "@/store/mutations"; 
export default { 
  name: "PrescriptionModal", 
  props: { 
    id: { type: Number, required: true }, 
  }, 
  setup(props: any) { 
    const store = useStore(); 
    const prescription = computed(() => store.getters.getPrescriptionById(Number(props.id))); 
    const closeModal = () => { 
      store.commit(MutationType.SetPrescriptionModal, { showModal: false, prescriptionId: undefined, }); 
    }; 
    return { closeModal, prescription }; 
  }, 
}; 
</script> 
<style scoped> 
h1 { color: #ffffff; text-align: center; font-size: 2rem; margin-bottom: 3rem; } 
</style> 

closeModal मेथड SetPrescriptionModal म्यूटेशन को कमिट करता है, जो स्टेट में showModal प्रॉपर्टी को झूठा सेट करता है, जबकि prescription कंप्यूटेड प्रॉपर्टी getPrescriptionById गेटर मेथड को कॉल करके उसके ID द्वारा एक नुस्खा प्राप्त करता है।

CreateModal कंपोनेंट

यह कंपोनेंट नुस्खे बनाने के लिए जिम्मेदार है।

निम्न कोड के साथ कंपोनेंट्स फोल्डर के अंदर CreateModal.vue बनाएं:

//src/components/CreateModal.vue 
<template> 
  <div class="modal is-active"> 
    <div class="modal-background"></div> 
    <div class="modal-content"> 
      <form @submit.prevent="createPrescription"> 
        <div class="field"> 
          <label class="label">Prescribed By</label> 
          <div class="control"> 
            <input v-model="prescribedBy" class="input" type="text" placeholder="Enter prescriber's name" /> 
          </div> 
        </div> 
        <div class="field"> 
          <label class="label">Prescription</label> 
          <div class="control"> 
            <textarea v-model="prescription" class="textarea" placeholder="Enter prescription"></textarea> 
          </div> 
        </div> 
        <div class="field"> 
          <label class="label">Disease</label> 
          <div class="control"> 
            <input v-model="disease" class="input" type="text" placeholder="Enter name of disease" /> 
          </div> 
        </div> 
        <div class="field"> 
          <label class="label">Livestock</label> 
          <div class="control"> 
            <input v-model="livestock" class="input" type="text" placeholder="Enter livestock" /> 
          </div> 
        </div> 
        <div class="field is-grouped"> 
          <div class="control"> 
            <button type="submit" class="button is-link">Submit</button> 
          </div> 
          <div class="control" @click="closeModal"> 
            <button class="button is-link is-light">Cancel</button> 
          </div> 
        </div> 
      </form> 
    </div> 
    <button class="modal-close is-large" @click="closeModal" aria-label="close"></button> 
  </div> 
</template> 
<script lang="ts"> 
import { defineComponent, reactive, toRefs } from "vue"; 
import { useStore } from "@/store"; 
import { Data } from "@/store/state"; 
import { MutationType } from "@/store/mutations"; 
import { ActionTypes } from "@/store/actions"; 
export default { 
  name: "CreateModal", 
  setup() { 
    const state = reactive({ 
      prescription: "", 
      prescribedBy: "", 
      disease: "", 
      livestock: "", 
    }); 
    const store = useStore(); 
    const createPrescription = () => { 
      if (state.prescription === "" || state.prescribedBy === "" || state.disease === "" || state.livestock === "") return; 
      const prescription: Data = { 
        vet_prescription: state.prescription, 
        prescribed_by: state.prescribedBy, 
        disease: state.disease, 
        livestock: state.livestock, 
      }; 
      store.dispatch(ActionTypes.CreatePrescription, prescription); 
      state.prescription = ""; 
      state.prescribedBy = ""; 
      state.disease = ""; 
      state.livestock = ""; 
    }; 
    const closeModal = () => { 
      store.commit(MutationType.SetCreateModal, false); 
    }; 
    return { closeModal, ...toRefs(state), createPrescription }; 
  }, 
}; 
</script> 

createPrescription मेथड एक एक्शन को डिस्पैच करता है जो सर्वर पर पोस्ट अनुरोध करता है, जिससे एक नया नुस्खा बनता है, जबकि closeModal मेथड SetPrescriptionModal म्यूटेशन को कमिट करता है (जो स्टेट में showModal प्रॉपर्टी को झूठा सेट करता है)।

फॉर्म और इनपुट एलिमेंट के साथ काम करने के लिए टू-वे डेटा बाइंडिंग की आवश्यकता होती है, और जैसे, हमने Vue 3 के reactive मेथड का उपयोग इनपुट फील्ड्स में उपयोग किए गए मूल्यों को संग्रहीत करने के लिए किया।

नोट: reactive का उपयोग करते समय, हमें toRefs का उपयोग करके रिएक्टिव ऑब्जेक्ट को एक साधारण ऑब्जेक्ट में बदलने की आवश्यकता होती है, जहां परिणामी ऑब्जेक्ट पर प्रत्येक प्रॉपर्टी मूल ऑब्जेक्ट में संबंधित प्रॉपर्टी को इंगित करने वाला एक रेफ है।

EditModal कंपोनेंट

यह कंपोनेंट नुस्खे अपडेट करने के लिए जिम्मेदार है। इसका तर्क पिछले अनुभाग में चर्चा किए गए CreatePrescription कंपोनेंट के समान है।

निम्न कोड के साथ कंपोनेंट्स फोल्डर के अंदर EditModal.vue बनाएं:

//src/components/EditModal.vue 
<template> 
  <div class="modal is-active"> 
    <div class="modal-background"></div> 
    <div class="modal-content"> 
      <form @submit.prevent="updatePrescription"> 
        <h1>Edit Modal</h1> 
        <div class="field"> 
          <label class="label">Prescribed By</label> 
          <div class="control"> 
            <input v-model="prescribedBy" class="input" type="text" placeholder="Enter prescriber's name" /> 
          </div> 
        </div> 
        <div class="field"> 
          <label class="label">Prescription</label> 
          <div class="control"> 
            <textarea v-model="prescription" class="textarea" placeholder="Enter Prescription"></textarea> 
          </div> 
        </div> 
        <div class="field"> 
          <label class="label">Disease</label> 
          <div class="control"> 
            <input v-model="disease" class="input" type="text" placeholder="Enter name of disease" /> 
          </div> 
        </div> 
        <div class="field"> 
          <label class="label">Livestock</label> 
          <div class="control"> 
            <input v-model="livestock" class="input" type="text" placeholder="Enter livestock" /> 
          </div> 
        </div> 
        <div class="field is-grouped"> 
          <div class="control"> 
            <button type="submit" class="button is-link">Submit</button> 
          </div> 
          <div class="control" @click="closeModal"> 
            <button class="button is-link is-light">Cancel</button> 
          </div> 
        </div> 
      </form> 
    </div> 
    <button class="modal-close is-large" @click="closeModal" aria-label="close"></button> 
  </div> 
</template> 
<script lang="ts"> 
import { defineComponent, reactive, toRefs, computed, onMounted } from "vue"; 
import { useStore } from "@/store"; 
import { Prescription } from "@/store/state"; 
import { MutationType } from "@/store/mutations"; 
import { ActionTypes } from "@/store/actions"; 
export default { 
  name: "EditModal", 
  props: { 
    id: { type: Number, required: true }, 
  }, 
  setup(props: any) { 
    const state = reactive({ 
      prescription: "", 
      prescribedBy: "", 
      disease: "", 
      livestock: "", 
    }); 
    const store = useStore(); 
    const setFields = () => { 
      const prescription = store.getters.getPrescriptionById(Number(props.id)); 
      if (prescription) { 
        console.log("prescription si kolo", prescription); 
        state.prescription = prescription.vet_prescription; 
        state.prescribedBy = prescription.prescribed_by; 
        state.disease = prescription.disease; 
        state.livestock = prescription.livestock; 
      } 
    }; 
    onMounted(() => { 
      setFields(); 
    }); 
    const updatePrescription = () => { 
      if (state.prescription === "" || state.prescribedBy === "" || state.disease === "" || state.livestock === "") return; 
      const prescription: Prescription = { 
        id: props.id, 
        vet_prescription: state.prescription, 
        prescribed_by: state.prescribedBy, 
        disease: state.disease, 
        livestock: state.livestock, 
        completed: false, 
        editing: false, 
      }; 
      store.dispatch(ActionTypes.UpdatePrescription, prescription); 
      state.prescription = ""; 
      state.prescribedBy = ""; 
      state.disease = ""; 
      state.livestock = ""; 
    }; 
    const closeModal = () => { 
      store.commit(MutationType.SetEditModal, { showModal: false, prescriptionId: undefined }); 
    }; 
    return { closeModal, ...toRefs(state), updatePrescription }; 
  }, 
}; 
</script> 
<style scoped> 
label { color: #ffffff; } 
h1 { color: #ffffff; text-align: center; font-size: 2rem; margin-bottom: 3rem; } 
</style> 

createPrescription मेथड एक एक्शन को डिस्पैच करता है जो सर्वर पर पुट अनुरोध करता है, जिससे उसके ID द्वारा मौजूदा नुस्खा अपडेट होता है, जबकि closeModal मेथड SetPrescriptionModal म्यूटेशन को कमिट करता है जो स्टेट में showModal प्रॉपर्टी को झूठा सेट करता है। onMounted लाइफसाइकिल हुक पर setFields मेथड को कॉल करने से getPrescriptionById गेटर्स मेथड ट्रिगर होता है जो स्टोर से उसके ID द्वारा एक नुस्खा लाता है और फिर रिएक्टिव ऑब्जेक्ट में प्रॉपर्टीज़ को प्राप्त नुस्खा प्रॉपर्टीज़ के साथ अपडेट करता है जैसे ही कंपोनेंट DOM पर माउंट होता है।

अंतिम प्रोजेक्ट लॉन्च करना

आपके रेल्स API सर्वर के रूट डायरेक्टरी में, सर्वर शुरू करने के लिए निम्न कमांड चलाएं:

rails server 

अब, आप निम्न कमांड के साथ फ्रंटएंड एप्लिकेशन चला सकते हैं:

npm run serve 

अंत में, आपका एप्लिकेशन निम्नानुसार होना चाहिए:

निष्कर्ष

हमने रेल्स के साथ एक CRUD API सर्वर बनाया है और Vue 3 कंपोज़िशन API और Vuex पर हमारा फ्रंटएंड एप्लिकेशन, सभी अलग-अलग सर्वरों पर चल रहे हैं जबकि दोनों स्टैक को एकीकृत करके एक फुलस्टैक वेब एप्लिकेशन बनाया है। मुझे उम्मीद है कि आपने इस ट्यूटोरियल से बहुत कुछ सीखा है। यदि आपके कोई प्रश्न या सुझाव हैं तो कृपया नीचे कमेंट सेक्शन में संपर्क करें। इस ट्यूटोरियल में बने फुल-स्टैक एप्लिकेशन के लिए यहां GitHub रेपो है।