Vue.jsでちょっとハマったtips

下記構成でハマったこと。

• vue-cliで初期化
• vue-router導入
• axios導入

vue.jsはvue3

ハマったこと

• 別コンポーネントのmethodsを呼び出す方法

# BlogContents.vue
<script>
import MicroCms from '@/components/MicroCms.vue'

export default {
  name: 'Blog',
  mounted () {
    MicroCms.methods.getBlog() # この記法じゃないと呼び出せない
  }
}
</script>

# MicroCms.vue
<script>
import axios from 'axios'

export default {
  name: 'MicroCms',
  methods: {
    getBlog: function () {
      axios.get(
        // 処理
      )
    }
  }
}

BlogContents.vueからMicroCms.vueのgetBlog()を呼ぶ際に下記の記法だと取得できなかった。

MicroCms.getBlog()

この記法だとgetBlog()はfunctionじゃないから見つからない的なエラーが出力される。