🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
Nuxt.js

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

Vuex

Vuexは、Vue.js アプリケーションのための状態管理ライブラリです。アプリケーション内で使用するコンポーネントのための集中データストアを提供。コンポーネント同士でデータをやり取りし、処理のフローを一貫させたり、データの見通しを良くすることができます。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

Q&A

解決済

1回答

1411閲覧

nuxt / vuexでaxios通信出来ない

tktail

総合スコア72

Nuxt.js

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

Vuex

Vuexは、Vue.js アプリケーションのための状態管理ライブラリです。アプリケーション内で使用するコンポーネントのための集中データストアを提供。コンポーネント同士でデータをやり取りし、処理のフローを一貫させたり、データの見通しを良くすることができます。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

0グッド

0クリップ

投稿2021/02/24 04:40

環境

laravel / nuxt.js

やりたいこと

axiosでlaravelのapiに通信し、vuexを使用して各コンポーネントでデータを扱えるようにしたい

試したこと

https://qiita.com/i88_arakawa/items/6ef5e339740883953d94
https://qiita.com/nunulk/items/0d50ac8cf7e16287f915

以上の2つの記事を参考にしながら、作成を進めています。
またyoutubeやudemyを使ってVuexについて学習しましたが、axiosに関しては言及がなかったので困っています。

実際のコード

laravelからは都道府県のデータを保持させており、URLにアクセスすればデータは返ってくる状況です。
以下のコードは先述のqiitaの記事を参考に作成しました。

store/master.js

1export const state = () => ({ 2 prefList: [] 3}) 4 5export const mutations = { 6 setPref (state, prefList){ 7 state.prefList = prefList 8 } 9} 10 11export const actions = { 12 async getPref ({ commit }){ 13 const response = await this.$axios.$get('/api/master/prefectures/get'); 14 commit("setPrefectures", response) 15 } 16}

example.vue

1<template> 2 <v-card> 3 {{ prefList }} 4 </v-card> 5</template> 6 7<script> 8import { mapActions, mapState } from 'vuex' 9 10export default{ 11 mounted(){ 12 this.getPref() 13 }, 14 15 methods: { 16 ...mapActions({ 17 getPref: 'master/getPref' 18 }) 19 }, 20 21 computed: { 22 ...mapState({ 23 prefList: (state) => state.master.prefList 24 }) 25 } 26}; 27 28</script> 29

各コンポーネントごとにaxios通信するのは効率が悪いような気がするので、一括で取ってきてvuexで管理すればいいのではないかと考えています。

しかし、vuexで非同期通信をする場合はactions内に記述するようにと勉強しましたが
そもそもaxiosに関する記事が少ないので、vuexを使用すること自体が間違っているのかとも思っています。

分らないことだらけですが、、お手引きを頂けたらと思います。
よろしくお願い致します。

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

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

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

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

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

guest

回答1

0

自己解決

https://qiita.com/yuya00/items/401248ba59630623e42f

こちらの通り、nuxt.config.js内のaxiosにてproxy:trueとすることによって解決しました。
URLでのアクセスは出来ますし、proxyの設定も行っていましたが、1文抜けていただけでした。
その為network errorとだけ表示されていたので、解決までに時間がかかりました。

投稿2021/02/24 07:04

tktail

総合スコア72

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問