Nuxtでの$記号の扱い

Question

質問概要

• Nuxtの勉強をしているのですが、$記号の使い方がよくわかっていません。
• this.$axiosでimportなしにaxiosが使えるのはなぜでしょうか？
• また、$記号の使い方に関する正式なドキュメント等はどこかにありますか？

$を使った例

• 例えば、NuxtにExpressを導入し、axiosを使って連携する場合、下記のようなコードを書きます。

  export default {
    asyncData(app) {
      return app.$axios.get('/api/users')
      .then((res) =>{
        return { result: res.data }
      })
    },
    ...
  }

• また、メソッド呼び出しする場合は次のようになると思います。

  methods: {
  test() {
    this.$axios.get('api/users')
    .then((res) => {
      this.result = res.data
    }
  }

• この場合、 import axios from 'axios'とはせずにapp.$axiosと書ける理由がよくわかりません。
• URLのパラメーターを取得するときも、this.$route.paramsといった記述が見られるので、axiosに限定した話ではなさそうです。

Javascript系での$の使われ方

• $記号は、Javascriptではただの文字列ですし、Typescriptでも${ a + b }といった　＄と{}を使った記法はありますが、$記号単体を使った記述方法は出てきません。
• 有名どころではjQueryでよく使っていましたが$()な使い方なので関係なさそうです。
• VueやNuxtのドキュメントにも$記号に関する情報が見当たりません（見落としてるだけかもしれません）
• おそらくは$を使うことでimport文を省略できるのだと思いますが、それはJSなのか、TSなのか、VueなのかNuxtなのか誰がやってくれているのでしょうか

Answer 1

おそらくは$を使うことでimport文を省略できるのだと思いますが、それはJSなのか、TSなのか、VueなのかNuxtなのか誰がやってくれているのでしょうか

@nuxt/axiosというモジュールです（Webサイト）。これが、this.$axiosなどを用意しています。

$記号は、Javascriptではただの文字列ですし

はい。同様に、$axiosというプロパティもふつうに作れます。

Comments

[shinido]

なるほど、axiosではなく@nuxt/axiosの機能だったのですね・・・。
$routeとかも同じ理屈でただのプロパティですね。
理解できました。ありがとうございました。