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

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

前回の復習

シリーズで書いております。前回までvuexの基本的な概念とstate,gettersについて書かせていただきました。↓
vuexを少しずつ少しずつ理解していこう(Nuxt.js環境下)　その1(state,getters編)

前回までで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について書こうと考えております。