Налаштування State Management (Vuex) для Vue-застосунку

Настройка State Management (Vuex) для Vue-додатку

Vuex — legacy state management для Vue 2. Структурований зі сторів, мутацій, екшнів та гетерів. Все ще широко використовується в Vue 2 проектах та legacy Vue 3 додатків.

Для нових Vue 3 проектів використовуйте Pinia.

Що входить у роботу

Настройка структури Vuex сторів, організація мутацій, екшнів та гетерів, розбивка на модулі, інтеграція devtools, тестування.

Встановлення

npm install vuex@next # для Vue 3

Базовий стор

import { createStore } from 'vuex'

export default createStore({
  state: () => ({
    items: [] as CartItem[],
  }),

  getters: {
    total: (state) => state.items.reduce((sum, i) => sum + i.price * i.qty, 0),
    count: (state) => state.items.reduce((sum, i) => sum + i.qty, 0),
  },

  mutations: {
    ADD_ITEM(state, item: CartItem) {
      const existing = state.items.find(i => i.id === item.id)
      if (existing) existing.qty++
      else state.items.push({ ...item, qty: 1 })
    },
  },

  actions: {
    addItem({ commit }, item: CartItem) {
      commit('ADD_ITEM', item)
    },
  },
})

Використання:

<script>
export default {
  computed: {
    cartCount() { return this.$store.getters.count }
  },
  methods: {
    add(item) { this.$store.dispatch('addItem', item) }
  }
}
</script>

Терміни

Базова настройка Vuex — 1–2 години. Повний стор з модулями — 1 день. Міграція з Vuex на Pinia — 2–3 дні для великих проектів.