Каква концепция за управление на състоянието реализира Vuex в JavaScript?

Vuex реализира концепцията за централизирано хранилище за всички компоненти на приложението Vue.js.

Ключови понятия на Vuex:

• State: Единствен източник на истина за данните на приложението.
• Getters: Производни свойства на state, използвани за изчисляване или филтриране на данни.
• Mutations: Синхронни функции, които променят state. Те са единственият начин за промяна на state.
• Actions: Асинхронни операции, които могат да съдържат всяка произволна логика и извикват mutations.
• Modules: Позволяват разделянето на store на по-малки, самодостатъчни единици.

Пример за работа с Vuex:

// mutation
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    incrementAsync ({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  },
  getters: {
    doubleCount (state) {
      return state.count * 2
    }
  }
})

// извикване на mutation от компонент
this.$store.commit('increment')

// извикване на action от компонент
this.$store.dispatch('incrementAsync')

// получаване на state от компонент
this.$store.state.count

// получаване на getter от компонент
this.$store.getters.doubleCount

Vuex предоставя структуриран и предсказуем начин за управление на състоянието, особено в големи SPA, чрез налагане на модел "еднопосочен поток на данни".