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

更改 Vuex 的 store 中的状态的惟一方法是提交 mutation。Vuex 中的 mutation 很是相似于事件：每一个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。

接下来咱们仍是用上一篇文章在state中存放的count为例，来看利用Mutation修改state的count属性。

利用commit来触发mutation函数

在mutation函数中添加count的add函数

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方法

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

export default mutations

复制代码

在组件中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('add', 5)
    }
  }
}
</script>
复制代码

在mutation传参（载荷）能够传递一个参数也能够传递一个对象。让咱们修改下上面的例子

mutation.js文件中修改以下

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

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', { 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>
复制代码

Mutation一条重要的原则就是要记住 mutation 必须是同步函数

1、[Vuex系列] - 初尝Vuex第一个例子

2、[Vuex系列] - 细说state的几种用法

3、[Vuex系列] - Mutation的具体用法

4、[Vuex系列] - getters的用法

5、[Vuex系列] - Actions的理解之我见

6、[Vuex系列] - Module的用法（终篇）