NuxtJSとTypescriptでStateのフォーマット化を共通実装！VueJSのテクニックを紹介します😎

export default {
  ...
  plugins: [
    { src: '@/plugins/index.ts', mode: 'client' },
  ],
  ...
}

import Vue from 'vue'
import moment from 'moment'
import {
  ProductCategory,
} from '~/graphql/API'

Vue.filter('displayDateTime', function (dateString?: string): string {
  if (!dateString) return ' - '
  return moment(dateString).format('YYYY年MM月DD日 HH:mm')
})

Vue.filter(
  'displayProductCategory',
  function (category?: ProductCategory): string {
    if (!category) return ' - '
    return {
      [ProductCategory.ConsumerElectronics]: '家電',
      [ProductCategory.HealthyFood]: '健康食品',
      [ProductCategory.Clothes]: '洋服',
      [ProductCategory.OfficeSupplies]: '事務用品',
    }[category]
  }
)

export enum ProductCategory {
  ConsumerElectronics = 'ConsumerElectronics',
  HealthyFood = 'HealthyFood',
  Clothes = 'Clothes',
  OfficeSupplies = 'OfficeSupplies',
}

<template>
  <div>
    <p>商品名：{{ product.name }}</p>
    <p>発売日：{{ product.publishedAt| displayDateTime }}</p>
    <p>カテゴリー：{{ product.category| displayProductCategory }}</p>
  </div>
</template>

// JS部分
import { Vue, Component } from 'nuxt-property-decorator'
import { Context } from '@nuxt/types'
import { productStore } from '~/store'

@Component({
  async asyncData(context: Context) {
    const { store, route } = context
    await Promise.all([
      store.dispatch('productStore/getProductById', {
        Id: route.params.id
      }),
    ])
  },
})
export default class Index extends Vue {
  get product(){
    return productStore.getProduct
  }
}