---
# System prepended metadata

title: キャッチアップ

---

# キャッチアップ

## vuexまとめ

基本的にvuexのどの分割ファイルにも記述されている。

```vue
@Module({
  name: 'home',
  stateFactory: true,
  namespaced: true
})
```

## APIについて知りたいとき

openAPIで確認できる。
apiリポジトリより `make doc` を実行。

## axiosのレスポンスの型定義

`/src/types/[module name].d.ts` に記載されている。

新しくAPIが追加されたときはここにファイルを追加して、型定義を書く。

## APIデータの取得

`/src/store/[xxxx].ts` 内で取得処理を行なっている。

* 受け取るデータの型宣言
* 表側のcreatedなどのフック関数から取得関数が呼ばれる（fetchReviewCountなど）
  * axiosでAPIを叩く処理
  * set~で値をストアする

## default.vue

レイアウトファイルで `<Nuxt />` で各ページコンテンツが呼び出される。

ページによってレイアウトを変えたい場合は以下のように記述。

```vue
export default {
  // layouts/welcome.vueファイルが呼ばれる
  layout () {
    return 'welcome'
  }
}
```

## コンポーネント呼び出し時の注意

`/src/components/Foo/Bar` というコンポーネントがある場合、呼び出し側は `<FooBar />` で呼び出す。

## $emit

propsが親→子にデータを渡すのに対して、emitは子→親にデータを渡す。

下記コードの `@update` はカスタムイベント。
`updateDate` の発動は子コンポーネントに委ねられている。


```vue
// テーブルのガジェットボタン
<JobTable :jobs="jobs" @select="select($event)" @update="updateData" />
// モーダルフォームのガジェットボタン
<JobForm :job="targetJob" @close="dialog = false" @update="updateData" />
```

上記 `JobTable` と `JobForm` で更に下記コンポーネントを呼び出している。
子コンポーネントから受け取るプロパティを定義。受け取るプロパティは `update` 。

```vue
<JobSettingsMenu
  :job-id="item.id"
  @update="$emit('update')"
  @close="true"
/>
```

`JobSettingsMenu` のクリックイベント `@click="copyJob"` が登録されている。 `copyJob`が発火したら下記メソッドが実行される。
`this.$emit('update')` が実行されたタイミングで `JobSettingsMenu` → `JobForm` or `JobTable` と伝播していき、最終的に呼び出し元の `updateDate` が発火する。

```vue
async copyJob() {
  const result = await JobStore.copy(this.jobId)
  if (result) this.$emit('update')
}
```

また、 `$emit('select', data.id)` という書き方もあり、これは呼び出し元である親のカスタムイベントに対してパラメータを渡す際の書き方である。
今回の例だと `select` に対して `data.id` をパラメータとして渡している。

## APIデータの更新

取得と同じく `/src/store/[xxxx].ts` 内で更新処理を行なっている。

* 更新するデータの型宣言
* 表側の `click` イベントなどから呼び出される。