Vue.js қолданбасында Vuex-пен өзара әрекеттесуді…

Vue.js қолданбасында Vuex-пен өзара әрекеттесу ұйымдастыру үшін негізгі келесі тәсілдер пайдаланылады:

Күйді алу (Getters): Бұл хранилищеден алынған күйдің шығу (есептелетін) қасиеттерін алу үшін пайдаланылады.

// компонентте
import { mapGetters } from 'vuex';

export default {
  computed: {
    // хранилищтің геттерін жергілікті есептелетін қасиетке сәйкестендіру
    ...mapGetters([
      'doneTodosCount',
      'getTodoById'
    ])
    // немесе басқа атаумен сәйкестендіру
    // ...mapGetters({
    //   // this.localName-ді this.$store.getters.getterName-ға сәйкестендіру
    //   localTodosCount: 'doneTodosCount'
    // })
  },
    methods: {
       // аргументтері бар геттерді пайдалану
       getSpecificTodo(id) {
          return this.getTodoById(id); // Геттерге қасиет немесе әдіс ретінде қол жеткізу
       }
    }
}

Күйді алу (State): Тікелей хранилищінің күйіне қол жеткізу.

// компонентте
import { mapState } from 'vuex';

export default {
  computed: {
    // хранилищінің күй қасиетін жергілікті есептелетін қасиетке сәйкестендіру
    ...mapState([
      'count'
    ])
    // немесе басқа атаумен сәйкестендіру
    // ...mapState({
    //   // this.localCount-ті this.$store.state.count-қа сәйкестендіру
    //   localCount: 'count'
    // })
  }
}

Күйді өзгерту (Mutations): Бұл күйді өзгерту үшін жалғыз әдіс. Олар синхронды болуы керек.

// компонентте
import { mapMutations } from 'vuex';

export default {
  methods: {
    // хранилищтің мутациясын жергілікті әдіске сәйкестендіру
    ...mapMutations([
      'increment' // this.increment()-ті this.$store.commit('increment')-ға сәйкестендіру
    ])
    // немесе басқа атаумен сәйкестендіру
    // ...mapMutations({
    //   add: 'increment' // this.add()-ты this.$store.commit('increment')-ға сәйкестендіру
    // })
  },
    // мутацияны шақыру
    someMethod() {
       this.increment(); // Немесе this.add();
    }
}

Асинхронды операциялар (Actions): Бұл асинхронды операциялар мен мутацияларды шақыру үшін пайдаланылады.

// компонентте
import { mapActions } from 'vuex';

export default {
  methods: {
    // хранилищтің әрекетін жергілікті әдіске сәйкестендіру
    ...mapActions([
      'incrementAsync' // this.incrementAsync()-ты this.$store.dispatch('incrementAsync')-ға сәйкестендіру
    ])
    // немесе басқа атаумен сәйкестендіру
    // ...mapActions({
    //   addAsync: 'incrementAsync' // this.addAsync()-ты this.$store.dispatch('incrementAsync')-ға сәйкестендіру
    // })
  },
    // әрекетті шақыру
    someMethod() {
        this.incrementAsync(); // Немесе this.addAsync();
    }
}

Модульдер (Modules): Үлкен қолданбаның ұйымдастырылуын жақсарту үшін хранилищті модульдерге бөлу.

// Модульдердің құрылымының мысалы
// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
import moduleA from './modules/moduleA';
import moduleB from './modules/moduleB';

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
});

// store/modules/moduleA.js
const moduleA = {
  namespaced: true, // атау кеңістігін қосу
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++;
    }
  },
  actions: {
    incrementIfOdd ({ state, commit }) {
      if ((state.count + 1) % 2 === 0) {
        commit('increment');
      }
    }
  },
  getters: {
    doubleCount (state) {
      return state.count * 2;
    }
  }
};

export default moduleA;

Компонентте модуль элементтеріне кеңістік атауы арқылы қол жеткізу:

// компонентте
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState('a', [ // 'a' модулінің күйіне қол жеткізу
      'count'
    ]),
    ...mapGetters('a', [ // 'a' модулінің геттерлеріне қол жеткізу
      'doubleCount'
    ])
  },
  methods: {
    ...mapMutations('a', [ // 'a' модулінің мутацияларына қол жеткізу
      'increment'
    ]),
    ...mapActions('a', [ // 'a' модулінің әрекеттеріне қол жеткізу
      'incrementIfOdd'
    ])
  }
}

Vue.js қолданбасында Vuex-пен өзара әрекеттесуді қалай ұйымдастыруға болады?