Что такое vuex?vue-99

Vuex — это официальная библиотека управления состоянием (state management) для Vue.js, реализующая паттерн Flux/Redux, но адаптированная для экосистемы Vue.

Основные концепции Vuex

1. State

Единственный источник истины (SSOT) для данных приложения. Все компоненты получают данные отсюда, а не хранят локально.

const store = new Vuex.Store({
  state: {
    count: 0,
    user: null
  }
})

2. Getters

Как computed-свойства для хранилища. Позволяют вычислять производные состояния.

getters: {
  doubleCount: state => state.count * 2
}

3. Mutations

Единственный способ изменить состояние. Должны быть синхронными.

mutations: {
  increment(state) {
    state.count++
  }
}

4. Actions

Для асинхронных операций. Вызывают mutations для изменения состояния.

actions: {
  async fetchUser({ commit }, userId) {
    const user = await api.fetchUser(userId)
    commit('SET_USER', user)
  }
}

5. Modules

Для организации больших хранилищ на разделенные части.

const moduleA = {
  state: () => ({ ... }),
  mutations: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA
  }
})

Зачем нужен Vuex?

  1. Централизованное управление состоянием - данные в одном месте
  2. Предсказуемость изменений - строгий flow данных
  3. Отладка - интеграция с Vue DevTools (time-travel debugging)
  4. Совместное использование состояния между множеством компонентов

Типичный flow данных во Vuex

  1. Компонент диспатчит Action
  2. Action выполняет асинхронные операции
  3. Action коммитит Mutation
  4. Mutation изменяет State
  5. State обновляет компоненты через геттеры

Когда использовать Vuex?

✅ Сложное приложение с множеством компонентов
✅ Несколько компонентов используют одни данные
✅ Частое изменение одних и тех же данных
❌ Простое приложение (можно обойтись provide/inject или event bus)

Пример полного хранилища

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    user: null,
    todos: []
  },
  getters: {
    completedTodos: state => state.todos.filter(todo => todo.completed)
  },
  mutations: {
    SET_USER(state, user) {
      state.user = user
    },
    ADD_TODO(state, todo) {
      state.todos.push(todo)
    }
  },
  actions: {
    login({ commit }, credentials) {
      return api.login(credentials)
        .then(user => commit('SET_USER', user))
    }
  }
})

Альтернативы Vuex

  1. Pinia (рекомендуется для Vue 3)
  2. Composition API (для простых случаев)
  3. Event Bus (устаревший подход)

Резюмируем:

Vuex — это мощное решение для управления состоянием в Vue-приложениях, обеспечивающее предсказуемость данных через строгий однонаправленный поток. Хотя для новых проектов на Vue 3 рекомендуется Pinia, понимание Vuex остается важным навыком для работы с legacy-кодом.

Вопросы

Собеседования