Vue3 + TypeScript環境でコンポーネントからStoreを呼び出す際に$storeが使用できない

投稿

こんにちは、フリー写真素材サイト「Canvaspace」管理人のYasuです。

Vue3 + TypeScript環境でコンポーネントからStoreを呼び出す際に$storeが使用できない場合の対処方法です。

前回のブログで解説していますが、最近Vue2から3へのアップデートを行っていました。

webpack4から5へ移行、Vue2から3へ移行ビルドを通す【webpack4から5へ移行編】｜管理人のつぶやき｜フリー写真素材「Canvaspace」
canvaspace.xyz
webpack4から5へ移行、Vue2から3へ移行ビルドを通す【webpack4から5へ移行編】｜管理人のつぶやき｜フリー写真素材「Canvaspace」
こんにちは、フリー写真素材サイト「Canvaspace」管理人のYasuです。「webpack4から5へ移行、Vue2から3へ移行ビルドを通す」を2回に分けて行っていきたいと思います。今回はwebpack4から5へ移行方法の解説になります。その前に、前回の記事で解説したwebpac4、Vue2、Typescriptの環境ができていることを前提として進めていきます。環境ができていない方は以下のリンクを参考に事前の環境構築をお願いします。canvaspace.xyzwebpack4 + Vue2 + TypeScriptの環境をサクッと作る｜管理人のつぶやき｜フリー写真素材「Canvaspace」…
webpack4から5へ移行、Vue2から3へ移行ビルドを通す【Vue2（vue-property-decorator）から3へ移行ビルドを通す】｜管理人のつぶやき｜フリー写真素材「Canvaspace」
canvaspace.xyz
webpack4から5へ移行、Vue2から3へ移行ビルドを通す【Vue2（vue-property-decorator）から3へ移行ビルドを通す】｜管理人のつぶやき｜フリー写真素材「Canvaspace」
こんにちは、フリー写真素材サイト「Canvaspace」管理人のYasuです。今回はwebpack4から5へ移行、Vue2から3へ移行ビルドを通すの「Vue2（vue-property-decorator）から3へ移行ビルドを通す」編の解説になります。なぜ書いたか今回はVue2 + TypeScriptを使用しているかつ、vue-property-decoratorを使用しています。ですが、vue-property-decoratorがVue3に対応しているか情報が少ない事や、vue-property-decoratorを使用したままVue3にアップグレードする方法が見つからなかったためこの記…

その際にコンポーネントから$storeを利用してstoreの呼び出しなどが出来なくなってしまいました。

対処方法

import { Store } from "@/store";

declare module "@vue/runtime-core" {
  interface ComponentCustomProperties {
    $store: Store;
  }
}

対処方法としては非常に簡単で以上のファイルを追加、記述することで対処可能です。

おすすめつぶやき

その他のつぶやきを見る