CRUD在vuejs vuex中添加来自外部组件的对象

// 在Vuex模块中定义state和mutation
// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    objects: {
      state: {
        objects: []
      },
      mutations: {
        addObject(state, payload) {
          state.objects.push(payload)
        }
      }
    }
  }
})

export default store

// 在外部组件中使用对象添加功能
// MyComponent.vue
<template>
  <div>
    <input v-model="newObject.name" type="text" placeholder="Name">
    <input v-model="newObject.age" type="number" placeholder="Age">
    <button @click="addObject">Add Object</button>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'

export default {
  data() {
    return {
      newObject: {
        name: '',
        age: 0
      }
    }
  },
  methods: {
    ...mapMutations('objects', ['addObject']),
    addObject() {
      this.addObject(this.newObject)
      this.newObject = {
        name: '',
        age: 0
      }
    }
  }
}
</script>