Edited at

vuexを少しずつ少しずつ理解していこう(Nuxt.js環境下) その2(mutations編)


前回の復習


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ずつカウントアップされる初歩的な装置です:relaxed:

Screenshot(4).png

まずはstore.jsから


store/index.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ファイルの記述


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の人気のあるところなんだと再認識:family_mmbb:


事例② リストの追加・削除

なんとなくmutationsがつかめてきたと思いますので、次はちょっと複雑なものを作っていきましょう。


仕様


  • 事前に「林檎(青森県)」「蜜柑(愛媛県)」「苺(栃木県)」はstateのfruitsに登録されております。

  • インプットエリア「フルーツ名を入力」「産地を入力」にそれぞれ文字を入力する。2つのインプットエリアに文字が入ると『追加ボタン』が押下できるようになります。

  • 押下するとstateのfruitsに登録され、イテレートされているliタグにレンダリングされる。

  • 「リスト削除」を押下したフルーツがstateのfruitsの登録から削除される。

完成図は下記です。

Screenshot(5).png

まずはstore.jsから


store/index.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ファイルの記述


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: {
//フルーツ名と産地2つとも入力されたときにボタンが有効になる。
isInputFull(){
return (!this.fruitsName || !this.fruitsKen)
},
//Gettersを呼び出している。
...mapGetters(['msg','fruits'])
}
}
</script>


こんな感じです。

本当はバリデートをもっとしっかりと書かなくてはいけないのかもしれませんが、今回はあくまでもvuexの理解なのでまた違う機会に勉強をします。

次回はactionsについて書こうと考えております。

↓書きました。

vuexを少しずつ少しずつ理解していこう(Nuxt.js環境下) その3(actions編)