Одна глобальная структура данных в Vue.js

Я создаю одностраничное приложение с Vue.js. Это относительно простое приложение, больше похожее на расширенную электронную таблицу. Я использую vue-router для обработки различных представлений приложения, некоторые из них используются для ввода новых данных, некоторые используются для выполнения вычислений с данными, но все эти данные переплетены (данные, введенные в представлении № 1, используются для ввода данных в представление). № 2, а затем оба используются для вычисления чего-либо в представлении № 3).

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

  • «правильный» способ: генерировать события в компонентах и ​​обрабатывать их в родительском; это кажется немного сложным для того, чего я хочу достичь
  • доступ к родительской области непосредственно в шаблонах компонентов через $parent.$data
  • мое текущее решение, назначающее ссылку на родительские данные дочернему объекту данных

Вот так:

const REPORTS = {
  template: templates.reports,
  data: function(){
    return this.$parent.$data
  }
};

Однако мое шестое чувство подсказывает мне, что это не очень хорошая практика.

Если я прав, как лучше всего это сделать: во-первых, глобальная структура данных, доступная из всех компонентов?


javascript vue.js vue-component
person ngr900    schedule 25.12.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вам нужно центральное управление состоянием, как сказано в документации:

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

Вы можете посмотреть мои другие ответы здесь и здесь

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

person Saurabh    schedule 25.12.2016
comment
Спасибо, это именно то, что я искал. Из любопытства, насколько плохо передается ссылка на родительские данные дочерним? - person ngr900; 25.12.2016
comment
@angr Совсем неплохо, если общение ограничено родителем-потомком, вы всегда можете перейти к общению родителя-потомка, как подробно описано здесь , но если вам нужно взаимодействовать между несколькими компонентами, которые могут стать грязными позже, чем использовать vuex. - person Saurabh; 25.12.2016