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


関連記事

Go言語

Go WebAssemblyでPromiseを使って非同期化してみた

1 はじめに2 Go WebAssemblyで非同期化のコード3 Promise化する4 おまけ5 さいごに6 おすすめ書籍 はじめに 先日WebAssemblyに入門して、実際に以下のチュートリアル ...

js

Vue.jsをTypeScriptで安全に開発するためのtsconfig.json

1 はじめに1.1 開発環境1.2 プロジェクト作成時点のtsconfig.json2 include3 exclude4 compilerOptions4.1 コンパイル系オプション4.1.1 ta ...

ざっとPWAの概要を調べてみる

1 はじめに2 ProgressiveWebAppsとは3 PWAに必要な技術4 PWAとセットでよく出てくる「AMP」とは5 ネイティブアプリ vs PWA6 さいごに はじめに ここ最近、Andr ...

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

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

react-icon

MUI Themeでカラー、シャドウ、フォントなどを設定する

1 はじめに2 Themeとは3 Themeのセットアップ4 Themeの設定方法4.1 Palette4.1.1 colorオブジェクト4.1.2 直接色を指定する4.2 Elevationのシャド ...

フォロー

blog-page_side_responsive

2021年3月
 123456
78910111213
14151617181920
21222324252627
28293031  

アプリ情報

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