Компонент `mount` запускается дважды при загрузке страницы - PullRequest
Новая
       10

Компонент `mount` запускается дважды при загрузке страницы

0 голосов
/ 26 апреля 2018

У меня очень странная ошибка: при загрузке страницы компоненты mounted и beforeMount запускаются / запускаются дважды? Каждый из моих компонентов представляет страницу, поэтому при загрузке страницы в mywebsite.com/contact функции Contact.vue mounted и beforeMount запускаются / запускаются дважды, но если я загружаю страницу в mywebsite.com/foo функции Contact.vue mounted и beforeMount запустить / запустить один раз (что я думаю? должно произойти).

Есть идеи, почему эти функции будут выполняться дважды? У меня немного привередливая настройка, но она хорошо работает для динамических шаблонов.

router/index.js: 

const router = new Router({
routes: [
  {
      path: (window.SETTINGS.ROOT || '') + '/:slug',
      name: 'Page',
      component: Page,
      props: true
  },
]
})

Page.vue: 

<template>
  <component v-if="wp" :is="templateComponent" v-bind:wp="wp"></component>
  <p v-else>Loading...</p>
</template>

<script type="text/javascript">

import { mapGetters } from 'vuex'
import * as Templates from './templates'

// Map templates
let templateCmps = {}
_.each(Templates, cmp => {
  templateCmps[cmp.name] = cmp
})

export default {

props: ["slug"],

components: {
  ...templateCmps

  // Example:
  // 'default': Templates.Default,
  // 'contact': Templates.Contact,
  // 'home': Templates.Home,
},

computed: {
  ...mapGetters(['pageBySlug']),

  wp() {
    return this.pageBySlug(this.slug);
  },

  templateComponent() {
    let template = 'default' // assign default template

    if (!_.isNull(this.wp.template) && this.wp.template.length)
      template = this.wp.template.replace('.php','').toLowerCase()

    return template
  }
},

created() {
  this.$store.dispatch('getPageBySlug', { slug: this.slug })
}
}
</script>

Contact.vue: 

<template>
    <main></main>
</template>

<script type="text/javascript">


export default {

    name: 'contact',

    mounted() {
      console.log('Contact::mounted') // this outputs twice
    },

    beforeMount() {
      console.log('Contact::beforeMount') // this outputs twice
    }
}

</script>

1 Ответ

0 голосов
/ 08 апреля 2019

У меня была (есть) похожая проблема. Я не уверен на 100% в этом, но я думаю, что проблема может быть вызвана vuex. Vuex имеет свой собственный внутренний экземпляр Vue (создан здесь в resetStoreVM() функции , вызываемой в constructor()). Я подозреваю, что этот внутренний экземпляр Vue вызывает повторное создание некоторых компонентов, что, в свою очередь, запускает события жизненного цикла для этих компонентов более одного раза.

Если не в vuex, возможно ли, что вы создаете более одного экземпляра Vue (т.е. new Vue({})) в своем приложении? В качестве альтернативы, существует ли какой-либо код, который вызывает инициализацию вашего основного экземпляра Vue или компонента Contact более одного раза? Это все, что я могу придумать, может вызвать это.

...