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の型定義~

page_footer_300rect




page_footer_300rect




-FrontEnd
-,

執筆者:


comment

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

CAPTCHA


関連記事

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に変換 ...

js

WebページにGoogleMapを配置する

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

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とRailsでTODOアプリのチュートリアルみたいなものを作ってみた【2018.03.24】

1 はじめに1.1 作るもの1.2 前提条件、及び環境1.3 Webpack について2 準備2.1 Rails + Vue.jsのプロジェクトを作成する2.2 Vue.jsの表示確認2.3 devサ ...

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

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

フォロー

follow us in feedly

page_side_300rect

2019年7月
« 6月 8月 »
 123456
78910111213
14151617181920
21222324252627
28293031 

アプリ情報

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