[Vuex系列] - Mutation的具體用法

時間 2019-12-07

標籤 vuex 系列 mutation 具體用法简体版

原文原文鏈接

更改 Vuex 的 store 中的狀態的惟一方法是提交 mutation。Vuex 中的 mutation 很是相似於事件：每一個 mutation 都有一個字符串的事件類型 (type) 和一個回調函數 (handler)。vue

接下來咱們仍是用上一篇文章在state中存放的count爲例，來看利用Mutation修改state的count屬性。vuex

利用commit來觸發mutation函數

在mutation函數中添加count的add函數bash

const mutations = {
  addNum (state) {
    state.num++
  },
  add (state) {
    state.count += 2
  }
}
export default mutations
複製代碼

在組件中使用mutation進行實現疊加器函數

<template>
  <div class="mutation">
    <p>{{ count }}</p>
    <button @click="addCount">+ADD</button>
  </div>
</template>

<script>
import store from '@/store/store'
export default {
  computed: {
    count () {
      return this.$store.state.count
    }
  },
  methods: {
    addCount () {
      store.commit('add')
    }
  }
}
</script>

複製代碼

Mutation的載荷（payload）

你能夠向store.commit傳入額外的參數，即mutation的載荷（payload）：咱們仍是以上面累加器的例子來實現mutation函數的傳參，來動態定義累加的數量。工具

在mutation.js中修改add方法post

const mutations = {
  addNum (state) {
    state.num++
  },
  add (state, n) {
    state.count += n
  }
}

export default mutations

複製代碼

在組件中store.commit如何傳參ui

<template>
  <div class="mutation">
    <p>{{ count }}</p>
    <button @click="addCount">+ADD</button>
  </div>
</template>

<script>
import store from '@/store/store'
export default {
  computed: {
    count () {
      return this.$store.state.count
    }
  },
  methods: {
    addCount () {
      store.commit('add', 5)
    }
  }
}
</script>
複製代碼

在mutation傳參（載荷）能夠傳遞一個參數也能夠傳遞一個對象。讓咱們修改下上面的例子this

mutation.js文件中修改以下spa

const mutations = {
  addNum (state) {
    state.num++
  },
  add (state, payload) {
    state.count += payload.amount
  }
}

export default mutations

複製代碼

組件中修改以下code

<template>
  <div class="mutation">
    <p>{{ count }}</p>
    <button @click="addCount">+ADD</button>
  </div>
</template>

<script>
import store from '@/store/store'
export default {
  computed: {
    count () {
      return this.$store.state.count
    }
  },
  methods: {
    addCount () {
      store.commit('add', { amount: 10 })
    }
  }
}
</script>
複製代碼

在store.commit中能夠進行對象風格的提交

依據上面的例子，咱們將組件中內容修改以下

<template>
  <div class="mutation">
    <p>{{ count }}</p>
    <button @click="addCount">+ADD</button>
  </div>
</template>

<script>
import store from '@/store/store'
export default {
  computed: {
    count () {
      return this.$store.state.count
    }
  },
  methods: {
    addCount () {
      store.commit({
        type: 'add',
        amount: 8
      })
    }
  }
}
</script>
複製代碼

使用常量替代 Mutation 事件類型

使用常量替代mutation事件類型在各類Flux實現中是很常見的模式。這樣可使 linter之類的工具發揮做用，同時把這些常量放在單獨的文件中可讓你的代碼合做者對整個項目包含的mutation一目瞭然。這在在須要多人協做的大型項目中，這會頗有幫助。

咱們在store中新建mutation-types.js文件，文件內容以下

export const SOME_MUTATION = 'SOME_MUTATION'
複製代碼

在mutation.js文件內容以下

import { ADD } from './mutation-types'
const mutations = {
  addNum (state) {
    state.num++
  },
  [ADD] (state) {
    state.count++
  }
}

export default mutations

複製代碼

在組件中內容和以前一致

<template>
  <div class="mutation">
    <p>{{ count }}</p>
    <button @click="addCount">+ADD</button>
  </div>
</template>

<script>
import store from '@/store/store'
export default {
  computed: {
    count () {
      return this.$store.state.count
    }
  },
  methods: {
    addCount () {
      store.commit('add')
    }
  }
}
</script>

複製代碼

在組件中使用this.$store全局屬性來觸發mutation函數

<template>
  <div class="mutation">
    <p>{{ count }}</p>
    <button @click="add">+ADD</button>
  </div>
</template>

<script>
export default {
  computed: {
    count () {
      return this.$store.state.count
    }
  },
  methods: {
    add () {
      this.$store.commit('add')
    }
  }
}
</script>

複製代碼

在組件中使用mapMutations輔助函數

<template>
  <div class="mutation">
    <p>{{ count }}</p>
    <button @click="add">+ADD</button>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  computed: {
    count () {
      return this.$store.state.count
    }
  },
  methods: {
    ...mapMutations(['add'])
  }
}
</script>
複製代碼