Какие есть варианты обновлять данные на лету через store Pinia?

Question

[Alex D]

Для наглядности собрал такой пример. Есть кнопка которая при значении true будет появляться а при false исчезать. Например user залогинен - кнопка есть, разлогинен - кнопки нет.

Цель: обновлять интерфейс и данные на лету (т.е во всех вкладках), без перехода по маршрутам и инициализации монтирования компонента.

const authorized = useAuth() //коннектим стор
const userAuth = ref(authorized.userloggedIn)//userloggedIn после всех проверок вернет статус авторизации

watch(
  () => authorized.userloggedIn,
  (newVal) => {
    userAuth.value = newVal
  }
)

//Здесь просто по таймеру меняем значения туда сюда чтобы видеть изменения
setInterval(() => {
  if(!userAuth.value) {authorized.userloggedIn = true} else {authorized.userloggedIn = false}
  console.log(authorized.userloggedIn);
}, 5000)

И это работает. Но только есть ощущение что можно это делать без setInterval. Может есть какие варианты по проще чтобы не делать везде setInterval на интерактивных элементах. Тупо наверное будет обновлять список постов из 500 штук каждые 5 секунд (например).

Comments

[RAX7]

https://pinia.vuejs.org/core-concepts/#using-the-store

[Alex D]

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

setTimeout(() => {
  store.increment()
}, 1000)

типа событие запускает тот кто его произвел?

[RAX7]

Alex D, я про то, что нужно использовать storeToRefs для работы со стором

[Alex D]

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

Answer 1

[iljaGolubev]

Может есть какие варианты по проще

куда уж проще setInterval .

Сложнее есть: взаимодействие экземпляров приложения через бэк (Websocket)

Comments

[Alex D]

Это да, просто надо что-то попроще. В общем вычитал что не умеет Vue так делать без посторонней помощи. Так что для мелких деталей можно запустить интервал а для обновления постов или более тяжелых данных придется юзать функции стора при монтировании компонента и добавлять обновленные данные.

[iljaGolubev]

или я чего-то не понимаю в вопросе, или вот.

[iljaGolubev]

но, кажется, там под капотом всё равно setTimeout

[Alex D]

iljaGolubev, оу это то что надо) Спасибо