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


関連記事

Cordovaの実機デバッグでハマった話

1 はじめに2 Cordovaとは2.1 React Nativeとの違い3 Cordovaでモバイルアプリを作る3.1 Node.jsをインストール3.2 Cordovaのコマンドラインツールをイン ...

react-icon

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

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

react-icon

React Konvaで状態管理されたCanvasを描画してみた

1 はじめに2 Canvasとは?3 React Konvaとは4 着せ替えアプリっぽいサンプルを作成4.1 React Konvaの導入4.2 画像の描画4.3 stateによるCanvas描画4. ...

[Rails + Materialize] DateTimePickerがなかったので…

1 はじめに2 前提条件2.1 ビューのイメージ3 モデルにゲッターとセッターを追加4 入力フォームに追加4.1 JSファイルにて使用宣言4.2 HTML4.3 コントローラーのストロングパラメータを ...

Nuxt 3(ベータ)の新機能を紹介

1 はじめに2 Nuxt 3の特徴2.1 新しいサーバエンジン(Nitro Engine)が登場2.2 Vue 3&Composition APIのネイティブサポート2.3 TypeScriptのネイ ...

フォロー

blog-page_side_responsive

2019年7月
 123456
78910111213
14151617181920
21222324252627
28293031  

アプリ情報

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