Төслийн нэгдсэн хадгалагчид програмын төлвүүдийг state -д үүсгэн ашиглахыг сурсан тул vuex -ийн дараагийн боломжийг судалцгаая. Одоогоор төслийн Actions компонентод байрлах товчнууд дээр дарах үйл явцын боловсруулагч state -д тодорхойлогдсон counter талбарын утгыг өөрчилнө. Харин Counter компонент state -ээс counter талбарыг аван темлейтдээ үзүүлж байгаа. Төсөлд бас нэгэн компонентийг нэмээд түүн дээр vuex -ийн дараагийн боломжийг судлая. Үүний тулд төслийн components хавтаст Counter компоненттой ижилхэн

<template>
  <h2>Тоолуур 2: {{counter}}</h2>
</template>

<script>
export default {
  computed: {
    counter() {
      return this.$store.state.counter
    }
  }
}
</script>

кодтой SecondCounter.vue файлыг үүсгэе.

Компонентуудыг ялгахын тулд Тоолуур 1: , Тоолуур 2: гэсэн текстийг үзүүлэхээр болгоё. Дараа нь шинээр үүсгэсэн компонентийг App компонентод

<template>
  <div class="container text-center pt-5">
    <app-counter></app-counter>
    <app-second-counter></app-second-counter>
    <hr>
    <app-actions></app-actions>
  </div>
</template>

<script>
import Counter from '@/components/Counter.vue'
import Actions from '@/components/Actions.vue'
import SecondCounter from '@/components/SecondCounter.vue'

export default {
  components: {
    appCounter: Counter,
    appActions: Actions,
    appSecondCounter: SecondCounter
  }
}
</script>

импортлон аваад компонентийн хэвд харуулна. Өөрчлөлтийг хадгалаад төслийг хөтөч дээр нээвэл

гэж харагдана. Тоолуурыг нэмэх, хасах товчнуудыг дарвал програмын логикийн дагуу

тоолууруудын утга зэрэг өөрчлөгдөнө. Програмын хэвд тоолуурын утгыг харуулах биш түүнээс хамаарсан тооцооллыг утгыг харуулах хэрэгтэй боллоо гэж үзье. Жишээ нь

return this.$store.state.counter  * (10 - 1 + 3) * 5

үйлдэл хийх хэрэгтэй болсон гэе. Дээрх үйлдлийг Counter , SecondCounter компонентуудын counter тооцооглогдох шинжээс буцаах утгуудад тавиад програмын ажиллагааг шалгавал

програм хэвийн ажилах ч асуудал үлдсэн. Учир нь төслийн Counter , SecondCounter компонентуудад кодын давхардал бий болсон. Хэрвээ store нэгдсэн хадгалагчид энэ үйлдлийг хийгээд үүний дараа компонентуудад өгдөг байвал компонентууд програмын логик ажиллагаанд оролцохгүйн дээр кодын давхцал байхгүй болохоор. Яг ийм зорилгод тохирох getter гэж нэрлэдэг механизм store нэгдсэн хадгалагчид байдаг. getter -ийг store нэгдсэн хадгалагчид

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    counter: 10
  },
  getters: {
    computedCounter(state) {
      return state.counter * (10 - 1 + 3) * 5
    }
  }
})

гэж тодорхойлно. Vuex.Store -д дамжуулах тохиргооны обьектод state талбараас гадна getters талбарыг тодорхойлон өгч болно. getters функцуудын обьектоор тодорхойлогдоно. Дээрх өөрчлөлтөөр getters -т computedCounter функцийг тодорхойлон өгсөн. getters -ийн функцууд компонентоос хандан авч болох ямар нэгэн өгөгдлийг буцаах ёстой. Эндээс getters -т зарлагдсан функцуудэд state -д тодорхойлогдсон шинжүүдэд ямар нэгэн үйлдлийг хийгээд үүний дараа үр дүнг компонентод өгөх боломж гарч ирнэ. Энэ бол манай зорилго. Функц state -д үйлдэл хийх тул түүнийг оролтын параметрээр авна. Ингэснээр getters -ийн функцууд state -ийн дурын талбарт хандах боломжтой болох тул бид компонентуудад хийгдэж байсан үйлдлийг computedCounter функцэд хийгээд буцаана. Одоо Counter , SecondCounter компонентууд state -ийн counter талбарт хандан тооцоолол хийхгүйгээр getters -ийн computedCounter -д

...
<script>
export default {
  computed: {
    counter() {
      return this.$store.getters.computedCounter
    }
  }
}
</script>

this.$store.getters.computedCounter гэж хандахад болно. Энд тооцоологдох шинжийн зарчимтай төстэй жижигхэн онцлог байгааг харсан байх. getters -т тодорхойлогдсон computedCounter нь функц боловч кодоос түүнд функц байдлаар биш ердийн шинж хэлбэрээр хандана. Өөрөөр хэлбэл computedCounter() гэж биш зүгээр л нэрээр нь computedCounter ханддаг. Харин Vuex үүнийг ойлгон computedCounter функцийг ажлуулан түүнээс буцаах утгыг өгнө. Кодын өөрчлөлтийг Counter , SecondCounter компонентуудад хийгээд төслийн компиляцийг хийгээд хөтөч дээр нээгээд

товчнууд дээр дарахад тоолууруудын утгуудад computedCounter тооцоолол хийн програм хэвийн ажиллана. Жишээ нь тоолуурын анхдагч утга, түүнд хийгдэх тооцооллын алгоритм

export default new Vuex.Store({
  state: {
    counter: 1
  },
  getters: {
    computedCounter(state) {
      return state.counter * 5
    }
  }
})

өөр боллоо гэхэд бид компонентуудын кодод хүрэхгүйгээр зөвхөн Vuex.Store тохиргооны обьектын тодорхойлолтыг засахад л хангалттай. Өөрчлөлтийг хадгалаад хуудсаа нээвэл програм

өөрчлөлтийн дагуу хэвийн ажиллана. Vuex -ийн getters механизм програмын логикоос компонентуудыг чөлөөлөн кодын давхцалгүй болгож байгаа энэхүү давуу талыг ашиглахыг сайн аргачлал гэж үздэг тул сайтар ойлгон програмдаа ашиглаж байхыг зөвлөе.