[Примечания к интерфейсу] Что такое Vuex и зачем он вам нужен

Vue.js

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

Что такое Вьюекс

Vuex специально разработан для Vue.js.Библиотека государственного управления, который используетцентрализованное хранилищеУправлять состоянием всех компонентов приложения.

Что такое государственное управление

Управление состоянием — это не волшебная концепция, вы делаете это все время, даже если никогда не понимаете концепцию управления состоянием.

Давайте сначала посмотрим на пример в документации, приложение для подсчета Vue:

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

Это приложение содержит следующие части:

  • состояние, источник данных, управляющий приложением;
  • представление, которое декларативно сопоставляет состояние представлениям;
  • действия, которые представляют собой изменения состояния, вызванные пользовательским вводом в представлении.

Этогосударственное самоуправлениеЗаявление, государственное самоуправление? Таким образом, можно понять, что три части состояния, представления и действия записываются в компоненте, а состояние управляется компонентами приложения соответственно, а именноуправлять своим состоянием.

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

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

Зачем нужно государственное управление

Многим изначально нравится использовать Vue, React и другие фреймворки, вероятно, из-за фреймворка.Отзывчивыйхарактеристика--При изменении данных представление перерисовывается. На самом деле это основная проблема, которую решает фреймворк.

1.вид показывает состояние
2.Когда пользователь работает с представлением, запускается действие для изменения состояния.
3.изменения состояния, вызывающие повторную визуализацию слоя представления

Вы нашли интересный вопрос, в процессе этого одностороннего потока,

  • Шаги 1 и 3 уже выполняются реактивными функциями Vue, нам не нужны детали их реализации.
  • Шаг 2 — это то, где мы вмешиваемся, это часть управления состоянием.

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

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

Для простого управления состоянием достаточно простого паттерна store, официальный пример:

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.Преимущество этого соглашения в том, что мы можем записывать изменения состояния во всех хранилищах, и в то же время внедрять расширенные инструменты отладки, которые могут записывать мутации, сохранять снимки состояния, откатывать историю/путешествия во времени.

Vuex опирается на Flux, Redux и т. д. Чтобы лучше управлять состоянием вне компонентов, очевидно, нам нужен Vuex.

Архитектура Flux похожа на очки

Архитектура Flux похожа на очки: вы знаете, когда вам это нужно.

Если у вас близорукость, вам нужно носить очки.Возможно, они вам не понадобятся, если у вас близорукость 100 градусов, и вам они могут не понадобиться, если у вас 200 градусов.Не волнуйтесь, всегда есть степень, которая позволит ты носишь это.

В этой статье официальная документация Vuex реорганизована, чтобы попытаться лучше понять управление состоянием.

Категории