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

Vuex コアコンセプト ミューテーション編

今回のお題は、こちらです。

https://vuex.vuejs.org/ja/mutations.html

ミューテーション

• src/store.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')

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

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

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

export const SOME_MUTATION = Symbol()

• src/store.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の元の値を、意図せず書き換える恐れのある破壊的メソッドを扱うときは、注意しましょう。