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

分割代入でオブジェクトを展開して取得したい
1. 普段はこう書いていた
オブジェクトの分割代入で処理をスッキリ書く方法
1. storeやdispatchの例
2. パスパラメータとか、ルートの処理の例
参考記事
まとめ

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

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の例

こちらは先ほどのstoreやdispatchの例です。

{ 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);
  ...
  ...
}