Vuex突变:使用ES6语法解构状态参数(使用quasar框架)

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state, payload) {
      const { amount } = payload // 使用ES6语法解构状态参数
      state.count += amount
    }
  }
})

export default store

// MyComponent.vue
<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="incrementCount">Increment</button>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  computed: {
    ...mapState(['count'])
  },
  methods: {
    ...mapMutations(['increment']),
    incrementCount() {
      this.increment({ amount: 1 }) // 调用mutation并传递参数
    }
  }
}
</script>