Vue: как правильно делать переключение «драйвера» с сохранением реактивности?

кошерно использовать для фронта вебкомпоненты из стандартов, а не сектантские колхозные компонентные системы на антипаттернах

Где здесь хоть один визуальный компонент? Здесь только реактивность на паттерне Наблюдатель.

а какой вообще цимес использовать жс-фреймворк без его кнопачек? что-бы огородиться от других таких же кривеньких фреймворков на несовместимости разработок?

По теме будет какой-нибудь комментарий? Ну или давай приведи аналогичный пример реактивности на веб-компонентах.

похоже его проблема порождена самим вуэ и не существует если вы его не используете

То есть сам сболтнул про какие-то антипаттерны и не осилил показать, как «правильно». Так и запишем.

для реакции на изменившиеся данные можно использовать, прокси, сеттеры, attributeChangedCallback, эвенты, специальные серверные протоколы, может быть что-то еще, что я сейчас уже не помню. В конце концов, если хочется тех же ошчушчений можно использовать и тот же RxJS.

То есть заколхозить систему observable-observer, вместо того, чтобы использовать готовую? А RxJS, батенька, реализует push-модель, в отличие от используемой здесь pull-модели распространения изменений. То есть ошчушчения будут совсем другие. Учите матчасть.

вот еще викреф какойт

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakRef

а готовые системы меняют на новые раз в год. Сколько там всего уже хранилок изобрели в рякте и их клонах для вуэ?

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

Слушай, ты вообще не в теме. Лучше помолчи и не позорься дальше.

по состоянию на 21 год говорят, никак

в актуальной документации вышеупомянутая цитата присутствует до сих пор…

еще вон шина событий была, но её как-то выпиливают, похоже…

//мимокрокодил

Я не очень вкурил, что там происходит, но, может, просто хранить список девайсов и текущий девайс в локальном/глобальном хранилище, и использовать текущий девайс во всех вью, где это нужно?

Можно дополнительно запилить composable типа useDevice, что-то вроде [current, all, select, add, remove, update] = useDevice(options), если, например, хочется иметь выбор, где именно хранить девайсы.

Кстати, в VueUse довольно немало готовых composables, на ресайз, например, там точно есть.

Ну так как ты предлагаешь, потом либо в компонентах путь до девайса выписывать, либо разбираться с реактивностью отдельных кусков класса.

У меня пока такой плагин вышел:

import Virtual from "./virtual"
import type { DeviceManager } from "./types"
import { computed, ref, type App } from "vue"

const virtual = new Virtual()

const drivers = {
  virtual
}

type DriverKey = keyof typeof drivers

const driverKey = ref<DriverKey>('virtual')

const device: DeviceManager = {
  // Driver proxy
  state: computed(() => drivers[driverKey.value].state.value),
  temperature: computed(() => drivers[driverKey.value].temperature.value),
  power: computed(() => drivers[driverKey.value].power.value),
  history: computed(() => drivers[driverKey.value].history.value),

  start: () => drivers[driverKey.value].start(),
  stop: () => drivers[driverKey.value].stop(),
  rawPower: (watts) => drivers[driverKey.value].rawPower(watts),

  // Control
  id: computed(() => driverKey.value),
  select: async (id: DriverKey) => {
    if (driverKey.value !== id) {
      // Detach old device first
      await drivers[driverKey.value as DriverKey].shutdown()
    }

    driverKey.value = id
    await drivers[id].attach()
  }
}

export default {
  install: (app: App) => {
    app.provide('device', device)
    device.select('virtual')
  }
}

Вроде рабочий, но ХЗ, не перемудрил ли.

не перемудрил ли.

А разве reactive() на экземплярах классов не работает? Вроде должен. Оно тоже делает прокси для объекта, только автоматически.

Я бы попробовал сложить все устройства в хранилище pinia/vuex, добавить метод для выбора текущего устройства (который заодно будет делать attach/shutdown) и всё. Использовать текущее устройство в шаблонах или хуках.

А разве reactive() на экземплярах классов не работает? Вроде должен. Оно тоже делает прокси для объекта, только автоматически.

https://stackoverflow.com/a/67895251/1031804 там с this потом километры боли. По-моему оно того не стоит.

А можешь объяснить чем концептуально отличаются хранилища pinia от тех что в vueuse? Документация почему-то pinia советует. А в vueuse из коробки поддержка localStorage есть.

чем концептуально отличаются хранилища pinia от тех что в vueuse

Pinia для централизованного управления реактивным состоянием (в памяти) — чтобы оно хранилось в одном месте, не размазываясь по рефам в куче компонентов, чтобы изменялось тоже контролируемо, через одно место.

(Как вариант, можно свалить всё состояние в самый верхний компонент и делать provide/inject, но это же будет помойка, причём не переиспользуемая.)

Можно, конечно, его и в localStorage сохранять, и на сервере, если хочется; а можно и не сохранять.

там с this потом километры боли.

Там люди, похоже, специально себе яйца прищемили и радуются.