前提・実現したいこと
題名の通りComponentsとVuexで使用できる関数を設定したいです。
公式を確認したところinjectを使用することで、ComponentsとVuexからアクセスできるメソッドを作成できるとのことだったので、injectを使用しましたがエラーが出てしまいました。
propsを使用していないのにも関わらずpropsに関するエラーが出てしまいました。
発生している問題・エラーメッセージ
vue.runtime.esm.js?2b0e:1419 Uncaught (in promise) TypeError: Cannot read property 'props' of undefined
該当のソースコード
**plugin/bookInfo.js **
js
1import noImage from '~/assets/images/noImage.png' 2 3export default ({ app }, inject) => { 4 inject('title', value => value.volumeInfo.title ? value.volumeInfo.title : 'No title')//引数から本のタイトルを取り出す。ない場合は No title 5 6 inject('author', value => value.volumeInfo.authors ? value.volumeInfo.authors[0] : 'No authors')//引数から本の著者名を取り出す。ない場合は No author 7 inject('image', value => value.volumeInfo.imageLinks ? value.volumeInfo.imageLinks.thumbnail : noImage)//引数から本の画像を取り出す。ない場合は読み込ませている画像を表示 8} 9
template
1 </v-card-subtitle> 2 <template v-if="selectedBook != null"> 3 <v-row style="text-align:center;"> 4 <v-col cols="6" class="pa-5"> 5 <img :src="$image(selectedBook)"> // inject 6 </v-col> 7 <v-col cols="4" class="pa-5"> 8 <v-card-title>{{ $title(selectedBook) }}</v-card-title> // inject 9 <v-card-subtitle class="pa-3"> 10 {{ $author(selectedBook) }} // inject 11 </v-card-subtitle> 12
試したこと
① 上手く読み込みが出来ていないと思い nuxt.configを確認して登録できているか確認しました。
plugins: [ 'plugins/axios', 'plugins/bookInfo' ],
② TypeErrorなのでスペルミスかと思いましたが、スペルのミスも見当たりませんでした。
補足情報(FW/ツールのバージョンなど)
Rails 6
Nuxt 2.15
あなたの回答
tips
プレビュー