Как взаимодействовать с vue компонентом из DOM-дерева?

Question

[RudMa]

Логика такая: у меня есть отдельный компонент на vue js в проекте(корзина).
На странице с корзиной есть соответственно корзина и форма для отправки(которая не связана с корзиной)
При отправке формы показывается сообщение об успешной отправке. Если успешно отправляется - меняю статус и показываю сообщение

<template>
  <cart v-if="PRODUCTS.length && !isSubmit" />
  <cart-empty v-else-if="!PRODUCTS.length && !isSubmit" />
  <cart-submit v-else />
</template>
<script>
import cart from "./components/cart.vue";
import cartEmpty from "./components/cart-empty.vue";
import cartSubmit from "./components/cart-submit.vue";
import { mapActions, mapGetters } from "vuex";
export default {
  name: "app-cart",
  components: { cart, cartEmpty, cartSubmit },
  data() {
    return {
      isSubmit: false
    };
  },
  computed: {
    ...mapGetters(["PRODUCTS", "ID_STRING", "ID_ARRAY"])
  },
  methods: {
    ...mapActions([
      "SET_PRODUCTS_TO_STATE",
      "DEACTIVATE_CART_STATUS",
      "DELETE_ALL_PRODUCTS_FROM_CART",
      "SHOW_CART_FORM",
      "GET_ID_STRING_OF_PRODUCTS",
      "GET_ID_ARRAY_OF_PRODUCTS"
    ]),
    changeSubmitStatus() {
      let cartApp = document.querySelector("#cart-app");
      let formSubmitStatus = cartApp.getAttribute("data-is-submit");

      if (formSubmitStatus) {
        isSubmit = true;
      }
    }
  },
  mounted() {
    this.SHOW_CART_FORM();
    this.SET_PRODUCTS_TO_STATE();
    this.GET_ID_ARRAY_OF_PRODUCTS();
    this.GET_ID_STRING_OF_PRODUCTS();
    this.changeSubmitStatus();
  }
};
</script>

В js сайта у меня такая функция

function setSubmitButtonListener() {
    let cartForm = document.querySelector(".cart__form form");
    if (cartForm) cartForm.addEventListener("submit", showSuccessPopup);
  }

  function showSuccessPopup(event) {
    let cartApp = document.querySelector("#app-cart");
    let cartForm = document.querySelector(".cart__form form");

    cartApp.setAttribute("data-is-submit", true);
    cartForm.setAttribute("style", "display: none");
    document.querySelector(".wrap .cell-xl-8").classList.add("max-width");
    localStorage.removeItem("cart");
    event.preventDefault();
  }

  setSubmitButtonListener();

Какие только костыли я не испробовала, ничего не работает. Как же мне поменять статус извне Vue.js?
А может у меня вообще логика неправильная? Подскажите, пожалуйста

Answer 1

[Антон Антон]

Логика неправильная. Есть несколько вариантов решения различной степени костыльности:

• Подключить event bus (встроенный в vue2 или какой-то типа mitt), в компоненте корзины подписываться на событие, в нужном месте извне - отправлять событие в шину.
  
• Сделать данные компонента корзины модулем в vuex, из "другого места" устанавливать данные используя экземпляр стора напрямую
  
• В случае vue3 можно экспортировать реактивный кусок данных для корзины и использовать его в компоненте корзины и извне компонента (это подвид второго варианта с хранилищем)