初心者がVuexの公式ガイドを勉強するメモ コアコンセプト　ミューテーション編

# Vuex コアコンセプト ミューテーション編
## 今回のお題は、こちらです。
### https://vuex.vuejs.org/ja/mutations.html

## ミューテーション

* src/store.js

``` js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 51
  },
  getters: {
  },
  mutations: {
    increment: (state) => {
      state.count++
    },
    decrement: state => state.count--,
  }
})
export default store

store.commit('increment')
```

``` js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 51
  },
  getters: {
  },
  mutations: {
    increment: (state, n) => {
      state.count += n
    },
    decrement: state => state.count--,
  }
})
export default store

store.commit('increment', 10)
```

* おさらいですね。
* 第二引数で、値を渡せるみたいです。　ペイロードと呼んでいるところですね

* store.js

``` js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 51
  },
  getters: {
  },
  mutations: {
    increment: (state, payload) => {
      state.count += payload.amount10
    },
    decrement: state => state.count--,
  }
})
export default store

store.commit('increment', {
  amount10: 10,
  amount5: 5
})
```
* ただの数字では、判りにくいので、オブジェクトを推奨していますね。


### オブジェクトスタイルのコミット( type )

* store.js

``` js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 51
  },
  getters: {
  },
  mutations: {
    increment: (state, payload) => {
      state.count += payload.amount
    },
    decrement: state => state.count--,
  }
})
export default store

store.commit({
  type: 'increment',
  amount: 10
})

// store.commit('increment', {
//   amount: 10
// })
```

* コミットがたくさん並んでいる状態なら、こちらのほうがわかりやすいように思います。
* まぁ、お好みでいいような感じですね。

### サイレントコミット
* 飛ばします。

### Vue のリアクティブなルールに則ったミューテーション
* 元の値を操作するのではなく、新しい値を返す感じですね。
* `Vue.set(obj, 'newProp', 123) `
  * vue.jsの配列の操作で使いましたね
* `state.obj = { ...state.obj, newProp: 123 }`
  * スプレッド演算子で、纒めて新しいオブジェクトを返り値にしています。

#### ミューテーション・タイプに定数を使用する

* src/mutation_type.js

``` js
export const SOME_MUTATION = Symbol()
```

* src/store.js

``` js

import Vue from 'vue'
import Vuex from 'vuex'
import { SOME_MUTATION } from './mutation-type.js'
Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 51
  },
  getters: {
  },
  mutations: {
    [SOME_MUTATION]: (state, payload) => {
      state.count += payload.amount
    },
    decrement: state => state.count--,
  }
})
export default store

store.commit({
  type: 'SOME_MUTATION',
  amount: 10
})
console.log('store.state.count', store.state.count)

// store.commit('increment', {
//   amount: 10
// })
```

* 定数にするやり方、どこかで見たことがあります。
* これも必要になれば、定数にすればいい感じでしょうか。
* まぁ、これもmutationsが増えてくれば、有用なのかと思います。

#### ミューテーションは同期的でなければならない
* mutatios の中ではapi等の非同期処理をしてはいけないんですね。

#### コンポーネント内におけるミューテーションのコミット
* mutationsのcommitをmapMutationsでmethodsで処理。
* あまりしないと思うので飛ばします。 (アクションでする事が多いと思います)


* 非同期処理がmutationsで出来ないので、次のアクションで処理するみたいですね。
* この章は、説明に終始してしまいました。
* 今回は、これで終わります。
 
#### 注意点として、大事なのは、storeの書き換えは、storeの値を新しい値で置き換える事を念頭に置くことみたいです。
  * リアクティブにならない場合、参照値であるオブジェクト、配列の書き換え方に注意してみましょう。
  * storeの元の値を、意図せず書き換える恐れのある破壊的メソッドを扱うときは、注意しましょう。