通过对象在 Vuex 中存储表单值

如何解决通过对象在 Vuex 中存储表单值

我有一个搜索表单和一个像这样的对象：

<!-- Search.vue -->
<template>
  <form>
    <input type="text" v-model="form.firstName">
    <input type="text" v-model="form.lastName">
  </form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        firstName: '',lastName: '',}
  }
}
</script>

我想将表单数据对象移动到我的 Vuex 存储，以便在用户离开该组件时保存表单设置。

理想情况下，我想做这样的事情，但即使这样有效，我还是会出错：

<template>
  <form>
    <input type="text" v-model="form.firstName">
    <input type="text" v-model="form.lastName">
  </form>
</template>

<script>
export default {
  computed: {
    form() {
      get() {
        return this.$store.state.form;
      },set(values) {
        this.$store.commit('SET_FORM',values)
      }
    },}
}
</script>

// store.js
export default {
  state: {
    form: {
      firstName: '',}
  },mutations: {
    SET_FORM(state,values) {
      state.form = values;
    },},}

Error: [vuex] do not mutate vuex store state outside mutation handlers.

这是我的替代方法，但我觉得这太复杂了。

<template>
  <form>
    <input type="text" v-model="firstName">
    <input type="text" v-model="lastName">
  </form>
</template>

<script>
export default {
  computed: {
    firstName() {
      get() {
        return this.$store.state.form.firstName;
      },set(value) {
        this.$store.commit('SET_FORM',{ attribute: 'firstName',value: value })
      }
    },lastName() {
      get() {
        return this.$store.state.form.lastName;
      },{ attribute: 'lastName',{ attribute,value }) {
      state.form[attribute] = value;
    },}

有谁知道为什么我会收到 Vuex 错误以及如何修复它们？或者知道更好的方法来解决这个问题？

谢谢！