FrontEnd

Vue 3とVuex 4とTypeScriptでタイプセーフに開発する

投稿日:

はじめに

Vue 3のComposition APIに対応した、Vuex 4が2月3日にリリースされました。

Vuex 4はTypeScriptをサポートしているため、TypeScriptのサポートが強化された、Vue 3のComposition APIと組み合わせることで、よりタイプセーフなアプリケーションを開発できるようになりました。

そこで、今回は、Vuex 4をComposition API上で、どのように使うことができるか紹介します(Composition APIについては、こちらをご覧ください)

インストール

新規でプロジェクトを作成する場合は、最新のVue CLIでプロジェクトを作成すると、Vuex 4がインストールされるようになっています。

もし、既存のプロジェクトにVuex 4を導入する場合は、以下の通りインストールします。

Storeの設定

StoreをTypeScriptで実装する場合は、以下のように、 main.tscreateApp() メソッドで storekey を渡します。

Storeの作成

まず初めに、Storeの作成について見ていきます。複数の本(名前と著者)のデータを保存するStoreをTypeScriptで実装した例がこちらです。

まず、注目する点は、Storeの作成をcreateStoreメソッドで行うようになった点です。定義したStoreインタフェースを型として渡してます。引数にはStateのほか、 GetterAction などを渡しています。

次に注目する点は、 InjectionKey です。StoreをTypeScriptで定義するには、これが必要になります。Storeの型を渡して、 InjectionKey を生成します。

最後に注目する点は、独自のuseStoreメソッドを定義している箇所です。Componentの Setup () メソッド内からStoreにアクセスするには、このuseStoreメソッドを使う必要があります。

加えて、型情報のついたStoreインスタンスを取得するためには、 useStore() メソッドに、先ほど生成したInjectionKeyを渡す必要があります。

StoreをComponentから使用する

上記のStoreの使用例はこちらです。

先ほど述べた通り、Componentの Setup() メソッド内でStoreにアクセスするためには、 useStore() メソッドでStoreインスタンスを取得する必要があります。

Storeのパラメータをリアクティブにアクセスしたい場合は、 computed() メソッドを定義します。

また、 Mutation 、もしくは、 Action にアクセスする場合は、 methos として定義します。

$storeプロパティに型をつける

$store プロパティに型をつけるには、型定義ファイルを作る必要があります(型定義ファイルの作成については、こちらをご覧ください)Storeの実装例の型定義ファイルは、以下のこちらです。

ComponentCustomProperties の型を宣言します。

また、 $store プロパティには以下のようにアクセスします。

さいごに

Vue 3がリリースされてから大分時間がたちましたが、ようやくVuexがComposition APIに対応してくれました。サードパーティのモジュールを使ってTypeScript対応していた方は、Vuex 4を試してみてはいかがでしょうか。

おすすめ書籍

Vue.js 3 超入門 プログラミングTypeScript ―スケールするJavaScriptアプリケーション開発 JavaScriptモダンプログラミング完全ガイド 堅牢なコードを効率的に開発できる! impress top gearシリーズ

blog-page_footer_336




blog-page_footer_336




-FrontEnd
-,

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


関連記事

Next.js 入門してみた

1 はじめに1.1 なぜNext.jsなのか?2 Next.jsとは何か2.1 Static Site Generation (SSG)2.1.1 Incremental Static Regener ...

js

WebページにGoogleMapを配置する

1 はじめに2 準備2.1 API Keyを取得する3 簡単な実装3.1 サンプルコード4 タップした位置にマーカを動かす4.1 サンプルコード5 場所を検索する5.1 サンプルコード6 画面例7 さ ...

react-icon

【初級者向け】Reactの開発環境の構築

1 はじめに2 Reactとは2.1 Declarative2.2 Component-Based2.3 Learn Once, Write Anyway2.4 Reactのメリット、デメリット3 環 ...

laravel logo

Inertia使ってみた②

1 はじめに2 フォームヘルパー2.1 ポイント2.2 他機能3 ローディング表示4 さいごに5 おすすめ書籍 はじめに 前回はInertiaの基本的な内容について書いてみました。今回はもう少し実践的 ...

Vue.jsのコードをTypeScriptで書く

1 はじめに2 TypeScriptでの書き方2.1 定義2.2 data2.3 methods2.4 computed2.5 props2.6 emit2.7 lifecycle hooks2.8 ...

フォロー

blog-page_side_responsive

2021年3月
 123456
78910111213
14151617181920
21222324252627
28293031  

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。