web-dev-qa-db-ja.com

コンポーネントの「マウント」は、ページの読み込み時に2回起動します

ページにコンポーネントmountedとbeforeMountを2回起動/実行するという非常に奇妙なエラーがありますか？各コンポーネントはページを表すので、mywebsite.com/contactにページをロードすると、Contact.vue関数mountedおよびbeforeMountが2回起動/実行されますが、ページをロードした場合on mywebsite.com/foo the Contact.vue functions mounted and beforeMount fire/run once（this is what（think？発生するはずです）。

これらの関数が2回実行される理由は何ですか？私は少し厄介な設定をしていますが、動的なテンプレートでうまく機能します。

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>
vue.jsvuejs2vue-componentvue-router
10
sazr

同様の問題がありました。私はこれについて100％確信はありませんが、問題はvuexが原因である可能性があると思います。 VuexにはVueの独自の内部インスタンスがあります（作成された hereresetStoreVM() function で呼び出されます- constructor() ）。私の疑いは、Vueのこの内部インスタンスにより一部のコンポーネントが再作成され、それらのコンポーネントのライフサイクルイベントがトリガーされて複数回起動されることです。

vuexにない場合、Vue（つまりnew Vue({})）のインスタンスをアプリで複数作成している可能性はありますか？または、プライマリVueインスタンスまたはContactコンポーネントが複数回初期化される原因となっているコードはありますか？これが原因であると考えることができるのはそれだけです。

1
morphatic