Что такое Vuex?

Vuex — это шаблон управления состоянием + библиотека для приложений Vue.js. Он служит централизованным хранилищем для всех компонентов приложения, с правилами, гарантирующими, что состояние может изменяться только предсказуемым образом.

Что такое «шаблон управления состоянием»?

Начнём с простого приложения-счётчика Vue:

const Counter = {
  // state
  data () {
    return {
      count: 0
    }
  },
  // view
  template: `
    <div>{{ count }}</div>
  `,
  // actions
  methods: {
    increment () {
      this.count++
    }
  }
}

createApp(Counter).mount('#app')

Это автономное приложение, состоящее из следующих частей:

• Состояние, источник истины, который управляет нашим приложением;
• Представление, декларативное отображение состояния;
• Действия, возможные способы изменения состояния в ответ на пользовательский ввод из представления.

Это простое представление концепции «одностороннего потока данных»:

<img src="data:image/png;base64,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

Однако простота быстро разрушается, когда у нас есть несколько компонентов, которые разделяют общее состояние:

• Несколько представлений могут зависеть от одного и того же фрагмента состояния.
• Действия из разных представлений могут потребовать изменения одного и того же фрагмента состояния.

Для первой проблемы передача свойств может быть утомительной для глубоко вложенных компонентов, и просто не работает для компонентов-братьев. Для второй проблемы мы часто прибегаем к таким решениям, как обращение к прямым ссылкам на экземпляры родительского/дочернего элемента или попытка изменять и синхронизировать несколько копий состояния с помощью событий. Оба этих шаблона хрупкие и быстро приводят к трудно поддерживаемому коду.

Так почему бы нам не выделить общее состояние из компонентов и не управлять им в глобальном синглетоне? С этим наш древовидный компонент становится большим "представлением", и любой компонент может получить доступ к состоянию или инициировать действия, независимо от того, где они находятся в дереве!

Определяя и отделяя концепции, участвующие в управлении состоянием, и навязывая правила, которые поддерживают независимость между представлениями и состояниями, мы придаем нашему коду больше структуры и поддерживаемости.

Это основная идея Vuex, вдохновленная Flux, Redux и Архитектурой Elm. В отличие от других шаблонов, Vuex также является реализацией библиотеки, специально адаптированной для Vue.js, чтобы воспользоваться его гранулированной системой реактивности для эффективных обновлений.

Если вы хотите изучить Vuex интерактивным способом, вы можете ознакомиться с этим курсом Vuex на Scrimba, который сочетает в себе видеоуроки и игровое поле с кодом, с которым можно приостанавливать и экспериментировать в любое время.

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

Vuex помогает нам управлять общим состоянием с затратами на дополнительные концепции и шаблонный код. Это компромисс между краткосрочной и долгосрочной производительностью.

Если вы никогда не создавали масштабное приложение SPA и сразу перешли к Vuex, это может показаться громоздким и сложным. Это совершенно нормально — если ваше приложение простое, вы, скорее всего, справитесь и без Vuex. Простого паттерна хранилища может быть достаточно. Но если вы создаете SPA среднего или большого масштаба, скорее всего, вы столкнулись с ситуациями, которые заставили вас задуматься о том, как лучше управлять состоянием за пределами ваших компонентов Vue, и Vuex станет для вас естественным следующим шагом. Есть хорошая цитата от Дана Абрамова, автора Redux:

Библиотеки Flux — как очки: вы поймёте, когда вам они понадобятся.