初めに
最近勉強した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。
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に全部書く場合。
Vuexを使ってStoreに書く場合。
同じ！！！！！
終わりに
小規模なのであまりありがたみはわかりにくいですが、すっきりまとまったような気がします。うまいこと整理ができると気持ちがいいですね。
コンポーネントがたくさんになった際には、Vuexないときつそうです。
これまでずっとLaravelばっかり触ってたけど、VueをやりはじめてVueも面白いなと思いました。もっといろいろできるようになりたいです。