vue.jsのcreated

vue.jsで用いるcreated()ですが、同一コンポーネントに2つ記入すると問題が発生しますか？
例えば以下のようにです。2つ目のcreated()を消すと1つ目のcreated()は問題なく動きます。
問題が発生している箇所が2つ目の内容自体に問題があるのか、
それとも同じコンポーネントに2度created()を2度書くという書き方そのものが間違っているのか切り分けたく、ご相談しました。

  created () {
    this.cartitem = this.$store.state.cartitem
  },

  created(){
  firebase.auth().onAuthStateChanged(user => {
       if(user){
         this.setLoginUser(user)
         if(this.$router.currentRoute.name === 'shop_item_cart') this.$router.push({name: stripe })
       }else{
         this.$router.push({name:'home'})
       }
     })
   },

行動規範の内容に同意します

回答2件

ベストアンサー

Vue.jsのライフサイクルフック(createdなど)は、複数の方法で、複数個の設定が可能です。

コンポーネントのオブションに設定する
mixinを利用する
イベントを設定する

1. コンポーネントのオブションに設定する

公式サイトのAPIにも説明のある一般的なやりかたです。

オプション自体には、一度しか設定できませんが、基本的にはこれだけでいいと思います。

tmykndrさんのおっしゃっているように、created()の中で複数の処理を書けますので、処理が長くなりそうであれば、処理の区切りに応じてメソッドを呼び出すのがいいと思います。

JavaScript
1new Vue({
2  created () {
3    this.myMethod1()
4    this.myMethod2()
5  },
6  methods: {
7    myMethod1 () {
8      console.log('myMethod1が呼ばれました。')
9    },
10    myMethod2 () {
11      console.log('myMethod2が呼ばれました。')
12    }
13  }
14})
15
16// 実行結果は、以下の通りです。
17// myMethod1が呼ばれました。
18// myMethod2が呼ばれました。

2. mixinを利用する

もし、複数のコンポーネントについて、createdのタイミングで共通の処理をしたい場合に有用です。
mixinsオブションを使って、別のオプションを混ぜ込むことができます。

mixinについては、公式サイトのガイドやAPIを確認してみてください。

JavaScript
1const mixin1 = {
2  created () {
3    console.log('mixin1のcreatedが呼ばれました。')
4  }
5}
6
7const mixin2 = {
8  created () {
9    console.log('mixin2のcreatedが呼ばれました。')
10  }
11}
12
13new Vue({
14  mixins: [
15    mixin1,
16    mixin2
17  ],
18  created () {
19    console.log('元々のcreated()が呼ばれました。')
20  }
21})
22
23// 実行結果は、以下の通りです。
24// mixin1のcreatedが呼ばれました。
25// mixin2のcreatedが呼ばれました。
26// 元々のcreated()が呼ばれました。

3. イベントを設定する

公式ドキュメントに記載がないので無視してかまいませんが、イベントでも設定可能です。
イベントの名前をhook:ライフサイクル名として設定するとオプションで設定した関数のあとに呼び出されます。

特定の条件下でライフサイクルフックを有効にしたりなどで使えると思いますが、created()のなかでifで分岐するなどすればいいので、よほど高度なことをしない限りは不要です。

JavaScript
1new Vue({
2  beforeCreate () {
3    // 念のため、$onceは$onの1回きりバージョンです
4    this.$once('hook:created', function () {
5      console.log('createdイベントが発生しました。')
6    })
7  },
8  created () {
9    console.log('元々のcreated()が呼ばれました。')
10  }
11})
12
13// 実行結果は、以下の通りです。
14// 元々のcreated()が呼ばれました。
15// createdイベントが発生しました。