前回の復習
vuexシリーズ
vuexを少しずつ少しずつ理解していこう(Nuxt.js環境下) その1(state,getters編)
vuexを少しずつ少しずつ理解していこう(Nuxt.js環境下) その2(mutations編)
vuexを少しずつ少しずつ理解していこう(Nuxt.js環境下) その3(actions編)
前回まででvuexのstate,gettersを理解したところで今回はmutationsについて理解していこうと思います。
mutations(ミューテーションズ)
mutant（変異体）つまり変化させるもの、変化させるものはstateの中身をです。
stateを変化させることができる唯一の方法がmutationsに登録されているメソッドたちなのです。
事例① カウントアップ
事例を使ってまた紹介しましょう。
完成図は下記です。
「数字プラス」ボタンを押すことで、数字が10ずつカウントアップされる初歩的な装置です
。
まずはstore.jsから
import Vuex from 'vuex'
const createStore = () => {
return new Vuex.Store({
state:{
msg:10,
},
getters:{
msg:(state)=>state.msg,
},
mutations: {
inclementMsg(state, addInt) {
state.msg += addInt
},
},
})
}
export default createStore
mutationsの中にメソッドであるinclementMsg(state, addInt)を追記しました。
これでstateの値を変更しております。
続いてindex.vueファイルの記述
<template>
<div id="fruits">
<p>{{ msg }}</p>
<v-btn color="blue" @click="inclement(10)">数字プラス</v-btn>
</div>
</template>
<script>
import {mapGetters} from 'Vuex'
export default {
methods: {
inclement(addInt) {
this.$store.commit('inclementMsg',addInt)
},
},
computed: {
//Gettersを呼び出している。
...mapGetters(['msg'])
}
}
</script>
ボタンを押下ときに発動させるためにクリックイベント@click="inclement(10)"を設置。
『発動したときに、inclementMsgを動かすようにcommit』これをmethodsに記述する。
以上となります。
だんだん動くようになってきたのでvue.jsとNuxt.jsが面白くなってきました。
DOM操作がいとも簡単に行えるところがvue.jsの人気のあるところなんだと再認識
事例② リストの追加・削除
なんとなくmutationsがつかめてきたと思いますので、次はちょっと複雑なものを作っていきましょう。
仕様
- 事前に「林檎（青森県）」「蜜柑（愛媛県）」「苺（栃木県）」はstateの
fruitsに登録されております。 - インプットエリア「フルーツ名を入力」「産地を入力」にそれぞれ文字を入力する。２つのインプットエリアに文字が入ると『追加ボタン』が押下できるようになります。
- 押下するとstateの
fruitsに登録され、イテレートされているliタグにレンダリングされる。 - 「リスト削除」を押下したフルーツがstateの
fruitsの登録から削除される。
完成図は下記です。
まずはstore.jsから
import Vuex from 'vuex'
const createStore = () => {
return new Vuex.Store({
state:{
msg:10,
fruits:[
{id:1,name:'林檎',ken:'青森県'},
{id:2,name:'蜜柑',ken:'愛媛県'},
{id:3,name:'苺',ken:'栃木県'}
]
},
getters:{
msg:(state)=>state.msg,
fruits:(state)=>state.fruits,
},
mutations: {
inclementMsg(state, addInt) {
state.msg += addInt
},
addFruitsMutan(state, [fruitsName , fruitsKen]){
let newFruits ={
id:state.fruits[state.fruits.length-1].id + 1,
name:fruitsName,
ken:fruitsKen
};
state.fruits.push(newFruits)
},
delFruitsMutan(state, index){
state.fruits.splice(index, 1)
}
},
})
}
export default createStore
続いてindex.vueファイルの記述
<template>
<div id="fruits">
<p>{{ msg }}</p>
<v-btn color="blue" @click="inclement(10)">数字プラス</v-btn>
<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>
<h2>フルーツを追加する</h2>
<v-text-field
label="フルーツ名を入力してください。"
v-model="fruitsName"
></v-text-field>
<v-text-field
label="産地を入力してください。"
v-model="fruitsKen"
></v-text-field>
<v-btn color="#0f0" @click="addFruits()" :disabled="isInputFull">追加ボタン</v-btn>
<li v-for="(fruit,index) in fruits" :key="index">{{ fruit.id }}:{{ fruit.name }}({{ fruit.ken }}) <a @click="delFruits(index)" href="javascript:void(0)">リスト削除</a></li>
</div>
</template>
<script>
import {mapGetters} from 'Vuex'
export default {
data () {
return {
fruitsName: null,
fruitsKen: null
}
},
methods: {
inclement(addInt) {
this.$store.commit('inclementMsg',addInt)
},
addFruits() {
this.$store.commit('addFruitsMutan',[this.fruitsName,this.fruitsKen]),
this.fruitsName = null,
this.fruitsKen = null
},
delFruits(index) {
this.$store.commit('delFruitsMutan',index)
},
},
computed: {
//フルーツ名と産地２つとも入力されたときにボタンが有効になる。
isInputFull(){
return (!this.fruitsName || !this.fruitsKen)
},
//Gettersを呼び出している。
...mapGetters(['msg','fruits'])
}
}
</script>
こんな感じです。
本当はバリデートをもっとしっかりと書かなくてはいけないのかもしれませんが、今回はあくまでもvuexの理解なのでまた違う機会に勉強をします。
次回はactionsについて書こうと考えております。
↓書きました。
vuexを少しずつ少しずつ理解していこう(Nuxt.js環境下) その3(actions編)