Nuxt2+TypeScript+@nuxtjs/composition-api +Store(Vuex & nuxt-typed-vuex)

@nuxtjs/composition-api はすでに適用済み

ライブラリのインストール

npm i nuxt-typed-vuex

＃vuex-module-decoratorsよりとっつきやすそう…と思い。

nuxt.config に設定追加

buildModules: [
  'nuxt-typed-vuex' // 追加
]

index.d.ts に定義追加

Typed Vuex の公式にある通りだけど…。

import { accessorType } from '~/store'

declare module 'vue/types/vue' {
  interface Vue {
    $accessor: typeof accessorType
  }
}

declare module '@nuxt/types' {
  interface NuxtAppOptions {
    $accessor: typeof accessorType
  }
  interface Context {
    $accessor: typeof accessorType,
  }
}

index.d.ts を tsconfig.json の typesに追加

"types": [
  "./types", // types/index.d.ts に置いてた
]

コンポーネントからの呼び出し

<script lang="ts">
import { defineComponent, computed, useContext } from "@nuxtjs/composition-api";

export default defineComponent({
  head() {
    return {
    };
  },
  setup(props) {
    const {$accessor} = useContext();
    const application_id = computed(() => $accessor.user.application_id);
    return { application_id };
  },
});
</script>