Nuxt +コンポジションAPI入門

この記事では、基本的な知識と理解を持っています.

Vue

NuxT JS

タイプスクリプト

Vue 3 :構成API

インストール

端末を開き、このコマンドを実行しますnpx create-nuxt-app nuxt-ts-composition-api 選択プロセスの間、タイプスクリプトと$ axiosを選択するようにしてください.
私はインストールプロセスを行くつもりはないが、公式ドキュメントを参照することができますhttps://nuxtjs.org/docs/2.x/get-started/installation
次に、@ nuxtjs/組成APIモジュールをインストールします.

npm install @nuxtjs/composition-api --save

そして、これをNuxtの中に追加してください.設定.jsファイル

{
  buildModules: [
    '@nuxtjs/composition-api'
  ]
}

それは、我々が必要とするすべてです、しかし、詳細については公式Docshttps://composition-api.nuxtjs.org/getting-started/setup

ルータインスタンスへのアクセス

TypeScriptと構成APIなしでNuxtで、ルータインスタンスにアクセスする通常の方法は、これですルータとそれは我々のようなメソッドへのアクセスを与えるpush() , back() , go() など
しかし、私たちが構成APIを使用しているので、我々はそれからアクセスしますuseContext() そして、それは我々が我々のVuex店にアクセスすることができる文脈として帰ります.
アクセスするには、次のコードを見てください.

私たちはstoreプロパティを横断しなければなりません.

アクセスaxaxosインスタンス

Axiosのようなプラグインについては、どのようにアクセスするのですか?
私たちがtypescriptを使用していないとき、我々は単にこのコードによってそれにアクセスすることができますthis.$axios IDEが私たちにそれを認識しないと叫ぶことなしで.しかし、私たちがtypescriptを使いたいので、それはそれを認識しないとあなたに言うつもりです.
しかし、我々はそれを介してアクセスすることができますuseContext() メソッド右?

残念ながら、veturcode拡張子はまだ何を認識していません$axios .
これを修正するには、index.d.ts これをディレクトリに入れますtypes プロジェクトのルートディレクトリにあります.

- assets
- components
- layouts
- middleware
- pages
- plugins
- static
- store
- types
  - index.d.ts

作成直後types ディレクトリとindex.d.ts ファイルのルートプロジェクトは上記のようになります.
現在、内部index.d.ts ここで、私たちのIDEが何があるかを認識するように、我々のタイプ宣言を入れます$axios そして、それは何を返しますか.

次に、型宣言を追加しました$axios からuseContext() 今すぐ動作します.

では、以下のメソッドにアクセスできます.get() , post() , delete() , put() , などのHTTPリクエストをする.
タイプスクリプトの宣言に関する詳細については、正式なドキュメントにhttps://typescript.nuxtjs.org/cookbook/plugins/

結論

私たちのnuxt typescriptアプリでカスタムプラグインを持っているとき、私たちは私たちのタイプ宣言ファイルの中にそれを登録することを確認しますindex.d.ts , それで、あなたがタイプスクリプトに新しいならば*.d.ts 型スクリプトの型宣言ファイルと見なされます.
私は、これがあなたに若干の時間とトラブルを保存したことを望みます.それは私が共有する必要があります、素晴らしい一日を過ごす!
フルソースコード:https://github.com/carlomigueldy/nuxt-typescript-composition-api