Государственное управление

Официальная реализация, подобная Flux

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

Vue предлагает Vuex решить эту проблему, это наша собственная библиотека управления состоянием, вдохновленная Elm. Он хорошо интегрируется с vue-devtools, обеспечивая тем самым нулевой доступ к отладке во времени.

Информация для разработчиков React

Если вы разработчик из React, вас может удивить, как vuex сравнивается с redux, который является наиболее популярной реализацией Flux в этой экосистеме. Redux на самом деле не зависит от уровня представления, поэтому мы легко можем использовать его с Vue с помощью простых привязок. Vuex отличается, потому что он знает, что это в приложении Vue. Это позволяет Vuex лучше интегрироваться с Vue, предлагая более интуитивный API и улучшенный опыт разработки.

Простое управление государством с нуля

Часто упускают из виду, что источником правды в приложениях Vue является объект необработанных данных - любой экземпляр Vue только прокси-доступ к нему. Поэтому, если у нас есть часть состояния, которая должна совместно использоваться несколькими экземплярами, мы можем поделиться ею по идентичности:

const sourceOfTruth = {}
const vmA = new Vue({
  data: sourceOfTruth
})
const vmB = new Vue({
  data: sourceOfTruth
})

Теперь, когда sourceOfTruth видоизменен, и vmB, и vmA обновят свои представления автоматически. Субкомпоненты в каждом из этих экземпляров будут в равной степени иметь доступ через данные. $ Root. $ Data. Теперь у нас есть единый источник правды, но отладка приложения была бы кошмаром. Любая часть данных может быть изменена любой частью нашего приложения в любое время, не оставляя следов.

Чтобы решить эту проблему, мы принимаем шаблон магазина:

var store = {
  debug: true,
  state: {
    message: 'Hello!'
  },
  setMessageAction (newValue) {
    if (this.debug) console.log('setMessageAction triggered with', newValue)
    this.state.message = newValue
  },
  clearMessageAction () {
    if (this.debug) console.log('clearMessageAction triggered')
    this.state.message = ''
  }
}

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

Кроме того, каждый экземпляр / компонент все еще может владеть и управлять своим собственным частным состоянием:

var vmA = new Vue({
  data: {
    privateState: {},
    sharedState: store.state
  }
})
var vmB = new Vue({
  data: {
    privateState: {},
    sharedState: store.state
  }
})

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