質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Q&A

0回答

932閲覧

Nuxtのinjectで注入した関数がsetup内で使えない

hajifu

総合スコア88

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

0グッド

0クリップ

投稿2020/09/18 18:12

わからないこと

Nuxtを js/OptionsAPI の構成で使っていましたが、最近 typescript/composition-api を使った実装を練習しています。
Nuxtでは plugins ディレクトリのファイルで

export default (context, inject) => { inject('myFunc', ...) }

などとすることで、コンポーネントやストアで this.$myFunc() のように依存を注入した関数が実行できると思います。

typescript/composition-api の構成でもそれをやりたくて、
https://typescript.nuxtjs.org/cookbook/plugins.html#iii-combined-inject
を参考にして実装してみましたが、 setup 内でうまく解釈してくれません。

実装したコード

// @/plugins/myFunc.ts import { Plugin } from '@nuxt/types' declare interface Funcs { hello: () => void } declare module 'vue/types/vue' { interface Vue { $myFunc: Funcs } } declare module '@nuxt/types' { interface NuxtAppOptions { $myFunc: Funcs } interface Context { $myFunc: Funcs } } declare module 'vuex/types/index' { interface Store<S> { $myFunc: Funcs } } const myFunc: Plugin = (_, inject) => { inject('myFunc', { hello: (): string => 'hello' }) } export default myFunc

ページで呼び出す

<script lang="ts"> import { defineComponent } from '@nuxtjs/composition-api' export default defineComponent({ setup(_, { root }) { console.log(root.$myFunc.hello()) } }) </script>

出ているエラー

上記コードの $myFunc の部分にニョロニョロが出て

Property '$myFunc' does not exist on type 'CombinedVueInstance<Vue, object, object, object, Record<never, any>>'.Vetur(2339)

というメッセージが表示されます。
アプリを開いてみるとちゃんと hello と表示されているので、型がうまくついていないのではないかと思うのですが、 typescriptcomposition-api も初心者でよくわかりませんでした。

しかしstoreファイルの方では、ちゃんと型がついていて補完も効きます。

// @/store/index.ts export const actions = { hello() {   // これは補完が効く this.$myFunc.hello() } }

聞きたいこと

any や ts-ignore などを使うことなく setup 内でちゃんと解釈してもらえるようにする方法はありますでしょうか?

バージョンなど

"dependencies": { "@nuxt/typescript-runtime": "^2.0.0", "@nuxtjs/composition-api": "^0.12.5", "core-js": "^3.6.5", "nuxt": "^2.14.5" }, "devDependencies": { "@nuxt/types": "^2.14.5", "@nuxt/typescript-build": "^2.0.3" }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問