Почему не срабатывает реактивность Pinia?

Question

[Кирилл]

Почему у меня не обновляются данные, когда я в Network отключаю подключение Wifi?

Вот мой компонент:

<template>
  {{ this.status }}
  <router-view v-slot="{ Component }">
    <transition name="slide">
      <component :is="Component" />
    </transition>
  </router-view>
</template>

<script>
import { useUserStore } from "@/stores/UserStore.js";
import { mapState } from "pinia";

export default {
  name: "App",
  computed: {
    ...mapState(useUserStore, ["status"]),
  },
  mounted() {
    window.addEventListener("online", useUserStore().setStatus(true));
    window.addEventListener("offline", useUserStore().setStatus(false));
    // window.addEventListener("offline", () => {
    //   useUserStore().setStatus(false);
    //   console.log(useUserStore().status);
    // });
    window.addEventListener("load", () => {
      if (navigator.onLine) {
        useUserStore().setStatus(true);
      } else {
        useUserStore().setStatus(false);
      }
    });
  },
};
</script>

Вот мой стор Pinia:

import { defineStore } from "pinia";

export const useUserStore = defineStore("UserStore", {
  state() {
    return {
      user: undefined,
      status: null,
    };
  },
  getters: {
    getStatus() {
      return this.status;
    },
  },
  actions: {
    getUser(payload) {
      this.user = payload;
    },
    setStatus(payload) {
      this.status = payload;
    },
  },
});

При этом если я меняю в компоненте

window.addEventListener("offline", useUserStore().setStatus(false));
    // window.addEventListener("offline", () => {
    //   useUserStore().setStatus(false);
    //   console.log(useUserStore().status);
    // });

меняю комментарий местами, то на отключение "интернета", this.status отражает false. Как-будто бы для того, чтобы state обновился надо его вызвать (в данном случае через консоль просто). И так у меня вообще во многих компонентах. Как я понимаю само событие offline статут всё таки меняет, но вот реактивно на странице он не отображается... В чем мое недопонимание? Пробовал и без mapState, просто через computed. Там тоже нет обновления...

Answer 1

[Алексей Ярков]

addEventListener принимает функцию вторым аргументом, а у вас там что?

window.addEventListener("offline", () => useUserStore().setStatus(false))

Comments

[Кирилл]

Золотой ты человек!!! Вот я... Спасибо! Внимательность -30lvl.
Можно тогда еще вопрос по Pinia?
Вот если я обращаюсь в компонентах в computed или в других Store на useUsersStore.status, то все getters того стора в котором я обращаюсь тоже автоматически будут обновляться в тех компонентах, в которых они объявлены?

[Aetae]

Кирилл, в этом суть реактивности - всё что изменилось и всё что зависит от изменившегося - обновится. А что не зависит - не обновится.

[Алексей Ярков]

Кирилл, ну вам собственно уже ответили))

[Кирилл]

Aetae, Алексей Ярков, Так то да, но эта "магия" реактивности для меня не всегда понятна) читаю доки и на рус и на англ, пытаюсь заглянуть под капот(изучать глубже), но иногда туплю по базовым вещам (как в случае с этой функцией), иногда не могу найти ответ на простейший вопрос .
Как я понял все что в data -- реактивно. Computed отличается от Method тем, что методы мы сами вызываем (на клик, или другое действие), а computed реактивен. И реактивен он только тогда, когда внутри него есть хоть одна переменная которая реактивна. При её изменении (либо любой другой реактивной, если их несколько, достаточно одной из них) computed пересчитывается.
В Pinia, в отличии от Vuex, state сразу реактивен (== логике data). Getters == логике Computed, Actions == логике Methods. А все mapЫ это лишь сахар для читабельности и ёмкости.

+Computed без аргументов, а метод имеет аргументы.

Изучаю не так долго, но боюсь, что из-за этой магии, я забуду как писать нативный js)) Думаю в этом отчасти преимущество React над Vue, когда "магия" полу автоматическая и есть связь с нативным кодом. Но меня бесит JSX))

Мои понимания верны? Думаю все через это проходили...

[Aetae]

Кирилл, да, всё верно.
Хз зачем тебе связь с нативным кодом и напряг мозгов когда достаточно просто знать: если ты что-то изменил оно изменится. Гарантировано. Если не изменил - не изменится. Всё. Дальше пиши очевидный и интуитивно понятный код.:)

В Vue 2 конечно было всё гораздо проще и очевидней: всё что попало в data становится реактивным, а чтобы что-то отбразилось одно должно попасть в data. Т.е. всё всегда реативно и вообще никаких вопросов.
Vue 3 ввело boilerplate и микроконтроль, теперь можно выстрелить себе в ногу забыв сделать что-то реактивным...
Таким образом в vue 2 всё реактивно и просто работает, а чтоб было не реактивно надо отдельно обозначать, а в vue 3 надо специально обозначать, чтоб было реактивно и следить за этим. Да, в теории это оптимальней, но на практике и, особенно, для новичков - это полный провал. Эх, да что тут говорить.:(

[Кирилл]

Aetae, Не хочется быть колдуном просто)) Хочется осознавать и не забывать чо происходит)) Просто когда я два месяца учу Vue и, к примеру, пишу {{ переменная }}, я уже и забыл, что в нативе это делается через querySelector('.foo').innerText. Ну и прочее подобное))

[Aetae]

Кирилл, ну тут только опыт поможет. Я просто переключаю контексты: работая с vue я выгружаю из мозга все "библиотеки" связанные с нативным кодом. Поскольку сам vue очень прост - остаётся много места на творчество.:)
То же само с react, но там уже надо держать в голове множество муторной хрени связанной с мемоизацией и иммутабельностью. С angular ещё хуже, с ним стараюсь работать по минимуму.:)

[Кирилл]

Aetae, Понял) Благодарю)) Пока React не привлекает, Vue нравится вообще всем. Говорят, чтобы быть мастером технологии, надо понять недостатки, но я пока не всё вижу во Vue) Хотя пишу так, для себя, мне достаточно... Нравится мне просто кодить)) Как стану сенсеем Vue, пойду дальше) Хотя у меня в планах заняться BackEnd, Node поучить, MongoDB, Express. Может Nuxt с его SSR. React слишком далеко и не факт)
Спасибо за то, что подтвердили моё понимание)