環境
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を使用すること自体が間違っているのかとも思っています。
分らないことだらけですが、、お手引きを頂けたらと思います。
よろしくお願い致します。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。