Vuex store狀態(tài)的更新唯一方式：提交(commit) mutations

Mutations主要包括兩部分：
1.字符串的事件類型（type）
2.一個回調(diào)函數(shù)指蚁，該回調(diào)函數(shù)的第一個參數(shù)就是state爽冕，還可以傳入第二個參數(shù)（mutation的載荷 Payload ）

image.png

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    counter: 10

  },
  mutations: {
    incrementCount(state, count) {
      state.counter += count;
    }
  }

})
export default store

<template>
  <div id="app">
    <h2>{{$store.state.counter}}</h2>
    <button @click="addCount(5)">+5</button>
    <button @click="addCount(10)">+10</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {}
  },
  methods:{
    addCount(count){
      this.$store.commit('incrementCount',count)
    }
  }
}
</script>

對象風(fēng)格的提交方式

提交 mutation 的另一種方式是直接使用包含 type 屬性的對象：

methods:{
    // addCount(count){
    //   this.$store.commit('incrementCount',count)
    // }

    //對象風(fēng)格的提交方式
    addCount(count){
      this.$store.commit({
        type:'incrementCount',
        count
      })
    }
  }

注意mutation的第二個參數(shù)是對象

  mutations: {
    // incrementCount(state, count) {
    //   state.counter += count;
    // }

    //對象提交風(fēng)格對應(yīng)的mutation
    incrementCount(state, payload) {
      console.log(payload) //{type: "incrementCount", count: 5}
      state.counter += payload.count
    }

  }

使用常量替代 Mutation 事件類型

mutations-types.js

export const INCREMENT_COUNT = 'incrementCount'

App.vue

<template>
  <div id="app">
    <h2>{{$store.state.counter}}</h2>
    <button @click="addCount(5)">+5</button>
    <button @click="addCount(10)">+10</button>
  </div>
</template>

<script>
import {INCREMENT_COUNT} from './store/mutations-types'

export default {
  name: 'App',
  data() {
    return {}
  },
  methods:{
    addCount(count){
      this.$store.commit(INCREMENT_COUNT,count)
    }
  }
}
</script>

store

import Vue from 'vue'
import Vuex from 'vuex'
import {
  INCREMENT_COUNT
} from './mutations-types'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    counter: 10
  },
  mutations: {
    [INCREMENT_COUNT](state, count) {
      state.counter += count
    }
  }

})
export default store

Mutation 必須是同步函數(shù)

如果是異步罐柳，當(dāng) mutation 觸發(fā)的時候灌危，回調(diào)函數(shù)還沒有被調(diào)用璃吧，devtools 不知道什么時候回調(diào)函數(shù)實(shí)際上被調(diào)用漓骚，導(dǎo)致無法追蹤狀態(tài)饮怯。

<template>
  <div id="app">
    <h2>{{$store.state.student}}</h2>
    <button @click="changeStudent">改變student中的name</button>
  </div>
</template>

<script>


export default {
  name: 'App',
  data() {
    return {}
  },
  methods:{
    changeStudent(){
      this.$store.commit('updateStudent')
    }
  }
}
</script>

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    student: {
      age: 18,
      name: 'haha'
    }
  },
  mutations: {
    updateStudent(state) {
      setTimeout(() => {
        state.student.name = 'aa'
      }, 1000)
    }
  }

})
export default store

上面的代碼 由于mutations里有異步操作闰歪，devtools無法追蹤，視圖上蓖墅，student對象的name屬性

image.png

如何處理異步問題库倘？使用actions

mapMutations輔助函數(shù)

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({

  state: {
    counter: 10
  },
  mutations:{
    increment(state){
      state.counter += 1
    }
  }
})
export default store

<template>
  <div id="app">
   <h2>{{counter}}</h2>
   <button @click="increment">增加</button>
  </div>
</template>

<script>
import { mapState,mapMutations } from 'vuex'
export default {
  name: 'App',
  data () {
    return {}
  },
  computed:{
     // 映射 this.myCount 為 this.$store.state.counter
    ...mapState(['counter'])
  },
  methods:{
    // 將 `this.increment()` 映射為 `this.$store.commit('increment')`
    ...mapMutations(['increment'])
  }
}
</script>

mapMutations也支持對象形式的映射