Как я узнаю, смонтировано ли приложение Vue из javascript?

#javascript #vue.js #vuejs2 #vuex #vue-router

#javascript #vue.js #vuejs2 #vuejs3 #vue-маршрутизатор

Вопрос:

У меня есть этот код для запуска моего приложения Vue:

 if (document.getElementById('app') != null) {
  new Vue({
      router,
      store,
      data () {
          return {
              errors: [],
              django_context: CONTEXT
          }
      },
      created() {
          this.$store.dispatch('products/getProducts');
      },
      render: h => h(App),
  }).$mount("#app");
}

Мне нужно знать, было ли приложение смонтировано с помощью ванильного javascript. Ty

1. Разве вы не можете просто установить глобальный флаг, который вы устанавливаете в true после монтирования приложения? window.mounted = true .

2. Оно монтируется, если у вас есть элемент с id="app" , иначе это не так

Ответ №1:

Вы можете проверить, что __vue__ свойство установлено в вашей точке монтирования.

 const mountPointSelector = "#app";
// [...]
const mountPoint = document.querySelector(mountPointSelector);
if (mountPoint) {
    return mountPoint.__vue__;
}

Ответ №2:

Обновление для Vue 3.x

 let VueAppInstance = null;
let containerSelector = "#app-container";
 
// check if app has been mounted already
const mountPoint = document.querySelector(containerSelector);
if (mountPoint amp;amp; !_.isUndefined(mountPoint.__vue_app__)) {

    VueAppInstance = mountPoint.__vue_app__._instance.proxy;

} else {

   // create a new app instance
   VueAppInstance = createApp({
      .....
   }).mount(containerSelector);

}

Ответ №3:

Vue имеет mounted жизненный цикл. Итак, после created добавления

   mounted() {
      console.log("Mounted!");
  },

Вы можете прочитать здесь и здесь, чтобы подробно ознакомиться с жизненными циклами Vue