如何将来自 vuex 的大数据与表单绑定？

Question

我正在尝试使用 Vue，但在将来自 vuex 的数据与我的表单绑定时遇到了问题。我创建了一个简单的商店

export default {
  state: {
    form: {},
  },
  action: {
    async getForm({ commit }, id) {
      try {
        const response = await axios.get(`url/${id}`);
        commit('setForm', response.data);
      } catch(e) {
        console.error(e);
      }
    },
  },
  mutations: {
    setForm(state, payload) {
      state.form = payload;
    },
  },
  getters: {
    getFormFromStore = state => state.form,
  },
}

我创建了一个简单的组件

data() {
  return {
    form: {},
  };
},
computed: {
  ...mapGetters('form', 'getFormFromStore'),
},
methods: {
  ...mapActions('form', 'getForm'),
},
watch: {
  getFormFromStore: {
    deep: true,
    handler(newVal) {
      this.form = Object.assign({}, newVal);
    },
  },
},
async mounted() {
  await this.getForm();
},
<div>
  <v-form>
    <v-text-field v-model=form.name/>
    <v-text-field v-model=form.lastName/>
    <v-text-field v-model=form.age/>
    <v-text-field v-model=form.address.street/>
    <v-text-field v-model=form.address.house/>
    <v-text-field v-model=form.children.girl/>
    <v-text-field v-model=form.children.girl.name/>
  </v-form>
</div>

但是我在尝试更改表单时遇到了问题。而且我不知道如何解决它。我读过一些文章，但它说我需要创建计算属性，但是如果我有包含 100 个字段的表单？

我的错误

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

Answer 1

Object.assign 制作 state.form 的浅拷贝。 v-model 中的双向绑定会改变状态。

watcher 应该做一个深拷贝。如果有多层嵌套，可以使用深度 clone/merge 的第三方实用程序。一种简单但效率较低的方法是使用 JSON 内置创建一个深拷贝：

  this.form = JSON.parse(JSON.stringify(newVal));

如何将来自 vuex 的大数据与表单绑定？

How can I binding big data from vuex with form?

vue.js

vuex