別の問題があり、内容を切り分けるために 既に動いている部分の簡易版を別プロジェクトに移植したのですが、store/index.js
に記載した axios
で API が取得できなくなってしまいました。actionsの発火コードが必要ですか?
-
APIの発行に問題はないと思います。
pages/
に配置した別コード ( 以下(<4>に記載 ) で取得できます。 -
設定ファイル
nuxt.config.js
は下に記載しました。移植元のものと差異はないと思います。 -
現状でエラーは出力されていません。
record
はnull
となっています。(vue.js Devtools のvuex から) -
ブレークポイントを 以下<5>に設置しましたが、async 以下には止まりません。(移植元は 止まります)
-
再度プロジェクトを作成し直しましたが状況は同じです。
-
package.json 内の各々のversionも一致しています。
-
actions内のコードを
getRecord
⇒asyncData
やfetch
をに代えてみましたが状況に変わりありません。
<1> store/index.js は以下です。
export const state = () => ({ record: null }) export const mutations = { setRecord (state, res) { state.record = res } } export const actions = { async getRecord ({ commit }) { const res = await this.$axios.$get('http://127.0.0.1:5000/api/record') commit('setRecord', res) } }
---
<2> 設定ファイルは以下で 動いているものと変わりないと思います。
// nuxt.config.js export default { mode: 'universal', ~省略~ ** Nuxt.js modules */ modules: [ // Doc: https://axios.nuxtjs.org/usage '@nuxtjs/axios', ], /* ** Axios module configuration ** See https://axios.nuxtjs.org/options */ axios: { }, 省略 }
<3> (package.json)
"dependencies": { "@nuxtjs/axios": "^5.3.6", },
<4> 念のため、pages配下に以下のコードを置いてAPIが出力できているか確認してみましたが、問題なく取得できます。
(pages/record.vue)
<template> <section> <p>{{ record }}</p> </section> </template> <script> export default { async asyncData ({ $axios, error }) { try { const response = await $axios.$get('http://127.0.0.1:5000/api/record') return { record: response } } catch (err) { error({ statusCode: err.resoponse.status, message: err.response.data.message }) } } } </script>
<5> breakpoint 設定
//抜粋です 下に全文を載せています export const actions async getRecord const res = commit('setRecord',res) error({
<6> プロジェクトの作成方法
-
$ yarn create nuxt-app
で作成しています。 -
その際の選択内容は以下です。
create-nuxt-app v2.15.0 ✨ Generating Nuxt.js project in store-sample ? Project name store-sample ? Project description My praiseworthy Nuxt.js project ? Author name ? Choose programming language JavaScript ? Choose the package manager Yarn ? Choose UI framework Buefy ? Choose custom server framework None (Recommended) ? Choose Nuxt.js modules Axios ? Choose linting tools ESLint ? Choose test framework Jest ? Choose rendering mode Universal (SSR) ? Choose development tools jsconfig.json (Recommended for VS Code), Semantic Pul l Requests
回答1件
あなたの回答
tips
プレビュー