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


関連記事

JQueryとmark.jsでマークダウンのリアルタイムプレビューをつくる

1 はじめに1.1 環境2 mark.js2.1 公式ドキュメント2.2 インストール2.3 実際に使用してみる2.4 オプションについて3 プレビュー機能3.1 vue.jsに関して3.2 JQue ...

rails

Rails 7でフロントエンド開発が大きく変わる

1 はじめに1.1 脱Node.jsの経緯2 Rails 7.0でのアセット管理3 propshaft4 importmap-rails4.1 JavaScript CDN経由でのnpmパッケージの利 ...

Vue.js入門その5〜マークダウンのリアルタイムプレビューをつくる〜

1 はじめに1.1 環境構築2 marked.jsの設定2.1 CDNのロード2.2 動作確認3 マークダウンを変換して表示3.1 雛形の作成3.1.1 HTML3.1.2 JS3.2 HTMLに変換 ...

react-icon

React QueryのSuspese Modeを使ってみた! [TypeScript]

1 はじめに2 React Suspenseとは3 React QueryのSuspense Mode3.1 事前準備3.2 Suspenseモードの有効化3.3 データをフェッチするコンポーネントの ...

icon

TypeScript初心者が押さえておくべき型システム

1 はじめに2 型アノテーション2.1 プリミティブ型2.2 リテラル型2.3 any2.4 nullとundefined2.5 ユニオン型2.6 交差型2.7 タプル型2.8 列挙型2.9 配列2. ...

フォロー

blog-page_side_responsive

2021年3月
 123456
78910111213
14151617181920
21222324252627
28293031  

アプリ情報

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