前提・質問したいこと
Nuxt-edgeを使って開発をしています。
ページ表示時にapiで問合せをした結果をstoreに登録する処理を書いています。
公式のfetchメソッドの説明に、
fetch メソッドは、ページがレンダリングされる前に、データをストアに入れるために使われます。
とあったので、fetchに書くのがふさわしいのだろうと、例を参考に以下のように書きました。
async fetch({store, param}){ let { data } = await axios.get('/api/users'); store.dispatch('users/setUserList', data); },
その結果、以下のようなエラーが表示されてしまいました。
Uncaught (in promise) ReferenceError: axios is not defined
色々試して(後述)、結局以下のように書いたら動作するようになったのですが、ネットで色んな方の記事を読んでも公式通りの書き方をされているので、私の環境では何か設定とかが足りていないのじゃないかと思っています。
どうすれば、他の方と同じような記述で動くようになるのでしょうか?
正常に動作したソース
javascript
1 async fetch({store, app:{$axios}}){ // ←app:{$axios}を追加 2 let { data } = await $axios.get('/api/users'); // ←引数に貰った$axiosを使用 3 store.dispatch('users/setUserList', data); 4 },
参考:https://github.com/nuxt-community/modules/issues/88
試したこと
this付けてみる
javascript
1 async fetch({store, param}){ 2 let { data } = await this.axios.get('/api/users'); 3 store.dispatch('users/setUserList', data); 4 },
⇒TypeError: Cannot read property 'get' of undefined
this.$付けてみる
javascript
1 async fetch({store, param}){ 2 let { data } = await this.$axios.get('/api/users'); 3 store.dispatch('users/setUserList', data); 4 },
⇒TypeError: Cannot read property 'get' of undefined
$だけつけてみる
javascript
1 async fetch({store, param}){ 2 let { data } = await $axios.get('/api/users'); 3 store.dispatch('users/setUserList', data); 4 },
⇒ReferenceError: $axios is not defined
動作環境&設定
プロジェクトは以下のコマンドで作成しました。
npx create-nuxt-app <project-name> --edge
プロジェクト作成時、以下を選択しました。
Use a custom server framework: Express
Choose features to install: pwaとaxios
Use a custom UI framework: none
Use a custom test framework: none
Choose rendering mode: spa
Choose a package manager: npm
Nuxt-edgeのバージョンの調べ方がわからないのですが、
昨日始めたので現時点最新(2.4.3?)だと思います。
あなたの回答
tips
プレビュー