FrontEnd

vuex-module-decoratorsとTypeScriptでvuexをスマートに書く

投稿日:

はじめに

こちらの記事で紹介したように、Vue CLI 3からVue.jsを手軽にTypeScriptで書くことができるようになりました。しかし、vuexに関してはそのままではTypeScriptで書くのは難しいように思います。

そこで、今回は vuex-module-decorators というサードパーティ製のパッケージを使って、より安全でスマートにvuexを扱う方法を紹介します。

導入

以下のコマンドでパッケージをインストールします。

TypeScriptを使用する場合は tsconfig.json に以下の設定をします。

  • “experimentalDecorators”: true,
  • “importHelpers”: true,

どのように記述するか

初めに

vuex-module-decorators での記述を見る前に、通常の vuex での記述を見てみましょう。一般的には以下のような記述になると思います。

これを TypeScript と vuex-module-decorators を使って記述すると以下のようになります。

vuex 標準の記述と比べて見やすくなったのではないでしょうか。それでは個別に見てみましょう。

state

state はクラスのプロパティとして定義します。

mutation

mutation は @Mutation で定義します。 なお、@Mutation を使うためには、事前に Mutation をimportする必要があります。

action

action は @Action で定義します。 なお、@Action を使うためには、事前に Action をimportする必要があります。

getter

getter はアクセサーとして定義します。

async MutationAction

@MutationAction を使うと複数の state を一度に commit することができます。return はJSON形式で指定します。なお、@MutationAction を使うためには、事前に MutationAction をimportする必要があります。

Dynamic Module

動的にモジュールを登録するには以下のようにします。

サンプルコード

最後に、 vuex-module-decorators を使ったサンプルコードを紹介します。

vuex

store

component

さいごに

vuex-module-decorators と TypeScript で vuex をスマートに扱う方法を紹介しました。 vuex-module-decorators のGitHubにも様々なサンプルが用意されているので、一度見てみると理解が深まると思います。

おすすめ書籍

Vue.js入門 基礎から実践アプリケーション開発まで  基礎から学ぶ Vue.js  動かして学ぶ!Vue.js開発入門 (NEXT ONE)  実践TypeScript ~ BFFとNext.js&Nuxt.jsの型定義~

blog-page_footer_336




blog-page_footer_336




-FrontEnd
-,

執筆者:


comment

メールアドレスが公開されることはありません。

CAPTCHA


関連記事

Vue.js入門その6〜RouterとComponentを使ってTODOアプリを修正〜

1 はじめに2 vue-routerのインストール3 サーバーサイドの改修3.1 APIに詳細(show)を追加3.2 元となるビューファイルを作成3.3 ルーティングの修正4 Vue.jsの実装4. ...

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

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

Vue.js入門その3〜簡単にTODOアプリを作ってみたよ〜

はじめに 7/12 修正 記事下部にて、filterメソッドを使用している箇所がありましたが、forEachの方が適しているとご指摘がありましたので、修正しました。 以前Qiitaの方に投稿した記事で ...

Vuexの機能と使い方

1 はじめに2 Vuexとは2.1 Single Source of Truth2.2 状態の取得、更新のカプセル化2.3 単方向データフロー3 Vuexのストア3.1 ステート3.2 ゲッター3.3 ...

Vue.js入門その2〜Vueインスタンスってなんぞ?〜

はじめに 前回の続きになります。 Vue.js入門その1〜基本文法〜 今回は下記の公式ドキュメントのメモになります。 Vue インスタンス テンプレート構文 算出プロパティとウォッチャ なお、今回もJ ...

フォロー

follow us in feedly

blog-page_side_responsive

2019年7月
 123456
78910111213
14151617181920
21222324252627
28293031 

アプリ情報

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