Laravel * Vuex * axios。Vuexを使う場合と使わない場合で比較

初めに

最近勉強したVuexを使って実際に書いてみたいと思い使ってみました。

バックエンドはLaravelを使ってます。新しくサイトをつくるのではなくて、以前作ったガチャガチャ英単語とガチャガチャ日本語の機能に追加する形で実装しました。エコです。

まだまだ分からないことだらけですがちょっとずつVueが分かってきてなんとか書けたので満足です。

Vuexを使わないでScriptに全部書く場合。

<template>
 <div>
 <p v-for="word in words" :key="word.id" >
 {{ word.word }}
 </p>

<form  @submit.prevent="formSubmit">  
<div>   
<h1>Make a sentence with the words</h1>
</div>
<p v-for="word in words" :key="word.id">
 {{ word.word }}
</p>
<textarea type="text" row="6" name="write"  v-model="post.post"> </textarea>
<label for="write" ></label>
<button </button>
 </form>  

 <p v-for="post in posts":key="post.id" >
 {{ post.post }}
 </p>
</div>
</template>

<script>

export default {
  data: function () {
    return {
      words: [],
      posts:[],
      post:{
        post:'' ,
      
      }
    };
  },
  created() {
    this.loadJapaneseWord();
    this.loadJapaneseWordPost();
  },

  methods: {
    loadJapaneseWord: function () {
      axios
        .get("/ja-words")
        .then((response) => {
          this.words = response.data.data;
          // console.log(this.words);
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    loadJapaneseWordPost() {
          axios
        .get("/ja-words/post")
        .then((response) => {
          //  console.log( response)
          this.posts = response.data.data;
          // console.log(this.posts);
        })
        .catch(function (error) {
          console.log(error);
        });
    },
      formSubmit() {  
          axios.post('/ja-words/post/create', this.post)
          .then(res => console.log(res))
          .catch(err => console.log(err));
           this.loadJapaneseWordPost();
           this.post.post = ''
      }
  },
};
</script>

Vuexを使ってStoreに書く場合。

フォームをコポーネント化。データwords: ,posts:,を削除。

<template>
 <div>
 <p v-for="word in words" :key="word.id" >
 {{ word.word }}
 </p>

<CreateForm/>

 <p v-for="post in posts":key="post.id" >
 {{ post.post }}
 </p>
</div>
</template>

<script>
//mapState　CreateForm をインポート
 import {mapState} from 'vuex'
 import CreateForm from '../components/CreateForm'

export default {
  data: function () {
    return {
      post:{
        post:'' ,
      }
    };
  },
//CreateForm
components: {
CreateForm
  },
//actions　loadJapaneseWord　loadJapaneseWordPostをdispatch
  created() {
    this.$store.dispatch('loadJapaneseWord')
    this.$store.dispatch('loadJapaneseWordPost')
  },
  computed: {
...mapState(['words','posts'])
  },
  methods: {
    loadJapaneseWord() {
        this.$store.dispatch('loadJapaneseWord')
          },
  },
};
</script>

子コポーネント。CreateForm.vue

<template>
 <div>
<form  @submit.prevent="formSubmit">  
<div>   
<h1>Make a sentence with the words</h1>
</div>
<p v-for="word in words" :key="word.id">
 {{ word.word }}
</p>
<textarea type="text" row="6" name="write"  v-model="post.post"> </textarea>
<label for="write" ></label>
<button </button>
 </form>  
</div>
</template>

<script>
import {mapState} from 'vuex'
export default {
  name:"CreateForm",
  data() {
  return {
     post:{
        post:'' ,
      }
  }
  },
  computed: {
...mapState(['words'])
  },
  methods:{
          formSubmit() {  
          axios.post('/ja-words/post/create', this.post)
          // .then(res => console.log(res))
          .catch(err => console.log(err));
          this.$store.dispatch('loadJapaneseWordPost')
           this.post.post = ''
      }
  }
}
</script>

Vuex。

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    words: [],
    posts:[],
 
  },
  mutations: {
    loadJapaneseWord(state, data ) {
     state.words = data
    },
    loadJapaneseWordPost(state, data ) {
      state.posts = data
     },
  },
  actions: {
    loadJapaneseWord({commit}) {
      axios.get("/ja-words")
      .then((response) => {
   //loadJapaneseWord mutationsをコミット
        commit('loadJapaneseWord', response.data.data)
        // console.log(response.data);
      })
      .catch(function (error) {
        console.log(error);
      });
  },
  loadJapaneseWordPost({commit}) {
    axios.get("/ja-words/post")
    .then((response) => {
      commit('loadJapaneseWordPost', response.data.data)
      // console.log(response.data);
    })
    .catch(function (error) {
      console.log(error);
    });
},
  }
})