6
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-11-06

#前回の復習
####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編)

6
5
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?