前回の復習

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から

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

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

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

仕様

事前に「林檎（青森県）」「蜜柑（愛媛県）」「苺（栃木県）」はstateのfruitsに登録されております。
インプットエリア「フルーツ名を入力」「産地を入力」にそれぞれ文字を入力する。２つのインプットエリアに文字が入ると『追加ボタン』が押下できるようになります。
押下するとstateのfruitsに登録され、イテレートされているliタグにレンダリングされる。
「リスト削除」を押下したフルーツがstateのfruitsの登録から削除される。

完成図は下記です。

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

こんな感じです。
本当はバリデートをもっとしっかりと書かなくてはいけないのかもしれませんが、今回はあくまでもvuexの理解なのでまた違う機会に勉強をします。
~~次回はactionsについて書こうと考えております。~~
↓書きました。
vuexを少しずつ少しずつ理解していこう(Nuxt.js環境下)　その3(actions編)