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

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

バックエンドはLaravelを使ってます。
新しくサイトをつくるのではなくて、以前作った[ガチャガチャ英単語](https://5seconds-en.com/en-words/gacha)と[ガチャガチャ日本語](https://5seconds-en.com/ja-words/gacha)の機能に追加する形で実装しました。エコです。

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

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

```vue
<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:[],を削除。
      

```vue
<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


```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。

```store\index.js
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);
    });
},
  }
})
```


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

![gif1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635968/aff06418-1bc6-8c29-a966-f4ddff0a1e9c.gif)

![ezgif-4-2e8e5b243f1c.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635968/973ded73-4780-854d-3ec3-1198af2bd2bb.gif)


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

![gif3.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635968/516bf7b2-00f3-55a6-64b9-a33e8912931f.gif)

![gif4.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635968/a107ae08-e516-fee3-2a47-85b3bcf387fd.gif)


同じ！！！！！

###終わりに

小規模なのであまりありがたみはわかりにくいですが、すっきりまとまったような気がします。うまいこと整理ができると気持ちがいいですね。
コンポーネントがたくさんになった際には、Vuexないときつそうです。


これまでずっとLaravelばっかり触ってたけど、VueをやりはじめてVueも面白いなと思いました。もっといろいろできるようになりたいです。


[ガチャガチャ英単語](https://5seconds-en.com/en-words/gacha)

[ガチャガチャ日本語](https://5seconds-en.com/ja-words/gacha)