Vuex mapMutation的基本使用

mapMutation-store中的同步方法

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    msg: 'Hello world',
    count: 0
  },
  getters: {
    reverseMsg(state) {
      return state.msg.split('').reverse().join('')
    }
  }
  mutations: {
    // 🚀🚀
    increate(state, payload) {
      state += payload
    }
  },
  actions: {
  },
  modules: {
  }
})

vue 文件

<template>
  <div>
    <!-- <button @click="$store.commit('increate',2)">Mutation</button> -->
    <button @click="increate(3)">Mutation</button>
  </div>
</template>
<script>
import { mapMutations } from 'vuex'
export default {
  methods: {
    // this.increate() 映射到 this.$store.commit('increate')
    ...mapMutations(['increate']),
    // 💛 💛 💛 💛 💛 💛 💛 💛 💛 💛
    // 如果是某一个module下的mutation,需要带上namespace
    // 格式: mapMutations(namespace,[mutationName])
    ...mapMutations('home', ['setHomeList']), // 🚀 数组形式
    ...mapMutations('home', { setListHome: 'setHomeList' }), // 🚀 对象形式
  },
}
</script>