Общие данные между экземплярами одного файла компонента

Question

Есть ли способ иметь несколько экземпляров одного и того же однофайлового компонента для совместного использования данных, не передавая их шинам или событиям?
Я имею в виду, за исключением секции data, которая является единственной, объявленной как Функция именно для этой цели, каждый другой раздел на самом деле разделен между istances, верно?

То, что я хотел бы, это что-то вроде static переменных для PHP или C классов.

Мой конкретный c вариант использования

У меня есть один файловый компонент, основанный на компоненте из библиотеки vue (Carousel из Element UI), высота которого должна быть определена как prop, но каждый экземпляр моего компонента-оболочки имеет разное содержимое с разной высотой.
Что я Смысл в том, чтобы каждый экземпляр проверял высоту его содержимого, находил максимум и устанавливал высоту обернутой карусели.
Для этого я могу получить элементы dom по классам и проверить максимальную высоту с помощью js, но я должен быть уверен, что каждый экземпляр извлекает только свое собственное содержимое, а не остальные, поэтому я хотел бы иметь что-то вроде общего счетчика и иметь каждый экземпляр, чтобы увеличивать этот счетчик в своем методе created и использовать его для создать свой собственный идентификатор.

Возможно ли это?
Если нет, есть ли другой способ? Я хотел бы избегать передачи каждому экземпляру опоры только для этой цели.

Answer 1

Ответ 1

Использование Vuex https://vuex.vuejs.org/, который является официальным Vue пакетом управления состоянием.

Ответ 2

Создание упрощенного Сама версия выглядит так:

import Vue from 'vue';

Vue.prototype.$state = {
    shared_variable: false,
    some_counter: 15
};

Vue.mixin({
    data() {
        return {
            $state: Vue.prototype.$state
        }
    }
});

window.Vue = new Vue({
    ...
});

Затем вы можете просто сослаться на this.$state в ваших компонентах.

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

// Some component.
export default {
    ...
    watch: {
        '$state.shared_variable': function(newVal, oldVal) {
            // Do stuff on change.
        }
    }
}

Этот пример, возможно, можно упростить, но так я использовал его долгое время.

Answer 2

Ответ на мой конкретный c вариант использования

Не знал о vue $el: это дает мне конкретный c root dom элемент моего экземпляра компонента, поэтому нет необходимо сгенерировать разные идентификаторы программно с общими данными.

Однако он не отвечает на первоначальный вопрос об обмене данными между экземплярами компонентов.