【TypeScript/Nuxt】オブジェクトの分割代入で処理をスッキリ書く

Nuxt

分割代入でオブジェクトを展開して取得したい

TypeScript/Nuxtを書いていて、オブジェクトの分割代入を用いて書くと処理をスッキリ書くことができたので、備忘録として記事にしておきたいと思います!

またオブジェクトの分割代入を用いて、TypeScriptで型を指定したい時はこちらの記事が参考になりますので、こちらを参照してください!

普段はこう書いていた

今までTypeScript/Nuxtで以下のような処理を書いていました!

別にこれで何も問題ないのですが、オブジェクトの分割代入を用いて処理をスッキリ書く方法がありましたので、紹介していきます!

pages配下の処理

import { Context } from '@nuxt/types';

async fetch (context: Context) {
  context.store.dispatch('.../...');
  context.params.page;
  context.redirect;
  ...
  ...
}
import { Context } from '@nuxt/types';

async fetch (ctx: Context) {
  ctx.store.dispatch('.../...');
  ctx.params.page;
  ctx.redirect;
  ...
  ...
}

オブジェクトの分割代入で処理をスッキリ書く方法

先ほどまでの書き方だと、Contextを受け取り、そこからドットでdispatchなどを呼び出していたと思います!

オブジェクトの分割代入を用いて、

  • { store }
  • { store: { dispatch } }

で受け取るようにすると、

  • store.dispatch(‘…/…’);
  • dispatch(‘…/…’);

のように記述できるので、context.storeの部分を省略できたり、同じ処理の記述も省略できるのでオススメです!

以下で実際の使い方の例を紹介していきます!

storeやdispatchの例

こちらは先ほどのstoredispatchの例です。

{ store }で受け取ることにより、contextの部分を省いて呼び出すことができます!

async fetch ({ store }) {
  store.dispatch('.../...');
  const hoge = store.getters['.../...']();
  ...
  ...
}

さらに{ store: { dispatch } }のようにすると、context.storeを省略してdispatchをかけるので便利です!

async fetch ({ store: { dispatch }, params: { page }, redirect }) {
  dispatch('.../...');
  params.page;
  redirect;
  ...
  ...
}

パスパラメータとか、ルートの処理の例

当然store以外でも可能です!

パスパラメータクエリパラメータルート関連の処理などもオブジェクトの分割代入を用いることで処理をスッキリ書くことができます。

async fetch ({ params, redirect, route }) {
  params.id;
  redirect('');
  route.path;
  ...
  ...
}

こうすると、だいぶ省略できるのでスッキリします。

{ route: { path, params: { id } } }のように、階層が結構深くなっているものに使用すると、さらに処理自体もスッキリしそうです!

async fetch ({ params: { id } }) {
  console.log(id);
  ...
  ...
}

async fetch ({ route: { path, params: { id } } }) {
  console.log(id);
  console.log(path);
  ...
  ...
}

参考記事

まとめ

今回は、TypeScript/Nuxtでオブジェクトの分割代入で処理をスッキリ書く方法を紹介しました!

これで処理をスッキリ書くことができるので、積極的に使っていきたいですね!

今回は、Nuxtでの例でしたが、React/NextVue/Nuxtなどでも使える記述方法だと思いますので是非試してみてください!

また今回はTypeScriptでの記述になっていますが、JavaScriptでも同様に記述できるはずなので、JavaScriptに入門し始めた方なども是非試してみてください

オススメの関連商品

Note一覧

コメント