Төсөлд vuex санг татан суулган store -ийг тохируулан өгсөн болохоор Vuex -ийг суулгах хичээлийн жишээний хүүхэд компонент хоорондын харилцан ажиллагаанд vuex -ийг ашиглан рефакторинг буюу сайжруулалтыг хийцгээе. Эхлээд компонентууд ямар өгөгдлүүдтэй ажиллах ёстойг store -д тодорхойлох хэрэгтэй. Иймээс store хавтаст index.js файлд

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    counter: 10
  }
})

дээрх өөрчлөлтийг оруулъя. Өөрчлөлтөөр Vuex.Store -ийн тохиргооны обьектод state талбарыг нэмсэн байгаа.

Програмчлалын хэлийг судлаад код бичих нэг их хүнд биш. Харин сайн код бичнэ гэдэг нь хүндхэн асуудал. Хэлийг эхлэн суралцагсад код бичих дээр түлхүү анхаарсанаас болоод цэгцтэй, зохион байгуулалт сайтай, өргөжүүлэх болон дэмжлэг үзүүлэхэд хөнгөн буюу өөрөөр хэлбэл сайн код бичих тал дээр нэг их анхаардаггүй. Энэ нь программийн бүтээгдхүүний загварчлалтай илүү холбоотой зүйл юм. Манайхан програмийн загварчлал хийхгүйгээр асуудлыг кодлогчид шууд өгөөд хурдан хийлгэх гэдэг. Энэ нь эцэстээ зөвхөн ажилладаг л кодийг бичүүлэхэд хүргэдэг. Ийм кодийг цаашид хөгжүүлэх болон дэмжихэд нэн хүндрэлтэй буюу бараг боломжгүй болгодог. Иймээс програмчлалын хэлний боломжуудыг маш өргөн судлан мэдэхийг зөвлөе. Програмыг загварын дагуу кодлоход таниас тухайн хэлний боломжуудыг зөв оновчтой ашиглахыг шууд шаардах болно.

useMemo хукийн судалгааг

import React, {useState} from 'react'

function App() {
  const [number, setNumber] = useState(40)
  
  return (
      <div className="container">
        <h1>Тооцоологдох шинж: {number}</h1>
        <button className={'btn btn-success mx-3'} onClick={() => setNumber(prev => prev + 1)}>Нэмэх</button>
        <button className={'btn btn-danger'} onClick={() => setNumber(prev => prev - 1)}>Хасах</button>
      </div>
  );
}

export default App;

код дээр харцгаая. useState -ээр 40 гэсэн анхны утгатай number хувьсагчийг үүсгээд хуудаст h1 гарчигаар number хувьсагчийн утгыг харуулаад Нэмэх, Хасах хоёр товч дээр дарахад setNumber функцээр number хувьсагчийн утгыг өөрчилнө. Кодийг ажлуулбал

хуудас нээгдэнэ.

Класс ба структурт ердийн талбар, арга, шинжүүдээс гадна статик талбар, арга, шинжүүд байж болдог. Статик талбар, арга, шинжүүд бүх класс, структурт хамаарна. Классийн статик гишүүнд хандахдаа классийн хувийг үүсгэх албагүй.

Статик талбар

Статик талбар класс ба структурийн төлвийг хадгална. Статик талбаруудыг ердийн талбарууд шиг тодорхойлох ч талбарын төрлийн өмнө static түлхүүр үгийг тавьдаг.

Хичээлээр useState -тэй тун төстэй useRef хукийн талаар авч үзье. useRef хукийн онцлог ашиглалтыг компонент хэдэн удаа дахин зурагдсанг /render/ тодорхойлох асуудлаар авч үзье. Асуудлыг дараах

import React, {useState, useEffect} from 'react'

function App() {
  const [renderCount, setRenderCount] = useState(1)
  
  useEffect(() => {
    setRenderCount(prev => prev + 1)
  })
  
  return (
      <div className="container">
        <h1>Render -ийн тоо {renderCount}</h1>
      </div>
  );
}

export default App;

кодоор шийдчих мэт.

Нийтлэлээр графикийн хэвүүдийн /GUI pattern/ түүхийг авч үзье. Боловсруулалтын графикийн хэвүүдийг 30 гаруй жилийн туршид боловсруулж байгаа бөгөөд энэ хугацаанд гарч ирсэн бүх хэвүүдийн талаар авч үзэх нь боломжгүй зүйл. Иймээс сүүлийн 30 жилд бий болсон үндсэн хоёр чиг хандлагын талаар авч үзээд энэхүү хоёр хандлага эцэстээ Silverlight ийн MVVM ба WPF паттерн болон хувирсанг харцгаая. Хэрвээ та графикийн хэвүүдийн түүхийн талаарх мэдээллийг сонирхож байвал Мартин Фаулерын - GUI Architectures нийтлэлийг уншаарай.

Хааяа өөр өөр параметрүүдийн багцтай нэг аргыг үүсгэх шаардлага гардаг. Ирсэн параметрүүдээс хамааран аргын тодорхой хэрэгжүүлэлтийг хэрэглэнэ. Ийм боломжийг аргын хэт ачаалал (method overloading) нэрлэдэг. overloading нэрийн хэт ачаалал орчуулга сайнгүй болсон байх талтай. Иймээс нэрийг overloading гээд тогтоогоод явах нь илүү ч байж болно.  
C# хэлэнд класст өөр өөр сигнатуртай /тодорхойлогч/ нэг ижил нэртэй олон аргыг үүсгэх боломжтой. Сигнатур гэж юу вэ? Сигнатур дараах зүйлүүдээс бүрдэнэ.

• Аргын нэр
• Параметрүүдийн тоо
• Параметрүүдийн төрлүүд
• Параметрүүдийн дараалал
• Параметрүүдийн модификаторууд

Гэхдээ параметрүүдийн нэрүүд сигнатурт орохгүй.

Ямарч програмын ажиллагааны чухал хэсэг бол төрөл бүрийн мэдээллийн боловсруулалт, тэдгээртэй ажиллахтай холбоотой байдаг. Иймээс энэ хичээлээс vuejs дээр төрөл бүрийн өгөгдлүүдтэй хэрхэн үр дүнтэй харьцах аргуудыг судлаж эхлэнэ. Үүнийг бид маш энгийн

жишээгээр үзнэ.

Хичээлээр react -ийн хукуудаас их өргөн ашиглагддаг useEffect -ийн талаар авч үзье. useEffect -ийн ажиллагааг судлах хуудасны кодийг

import React, {useState} from 'react'

function App() {
  const [type, setType] = useState('users')
  
  return (
      <div className="container">
        <h1>Өгөгдлүүд: {type}</h1>
        
        <button onClick= {() => setType('users')} className="btn btn-primary mx-3">Хэрэглэгчид</button>
        <button onClick= {() => setType('todos')} className="btn btn-primary mx-3">Хийх ажлууд</button>
        <button onClick= {() => setType('posts')} className="btn btn-primary mx-3">Нийтлэлүүд</button>
        
      </div>
  );
}

export default App;

гэж үүсгэе.

Програм зохиох бол нарийн төвөгтэй ажил. Ямар ч програмын хувьд өөрийн хийх ажлаа гүйцэтгэхийн чацуу цаашдаа хөгжих, ажлын хүрээнд шинээр гарч ирэх илүү нарийн асуудлыг шийдвэрлэх боломжтой илүү уян хатан байдлаар зохиогдсон байх хэрэгтэй. Хэрвээ та програмын төслийн ахлагч, зохион бүтээгчээр ажиллаж байсан бол програмын ажиллагааг цаашдаа дэмжих, үйлчилгээ үзүүлэх, өргөжүүлэн хөгжүүлэхэд цаг хугацаа хожихын тулд кодыг нэг удаа хэрхэн яаж бичихийг тодорхойлох хамгийн төвөгтэй асуудал гэдгийг мэдэрсэн байх.