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

【问题标题】：How can I binding big data from vuex with form?如何将来自 vuex 的大数据与表单绑定？
【发布时间】：2022-01-07 09:27:21
【问题描述】：

我正在尝试使用 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 个字段的表单？

我的错误

错误 [vuex] 不要在突变处理程序之外改变 vuex 存储状态。

【问题讨论】：

“但我在尝试更改表单时遇到问题” - 什么问题？
我已经更新了我的问题。 @EstusFlask
您正在设置一个“突变”对象，您是否将它连接到您的Vuex.Store？您在何时何地调用 setForm？
@DanielBeck 我只在从 API 获取数据后才调用 setForm
好的，您可能想向我们展示该部分，以及您将突变对象附加到商店的位置，因为其中一个可能是问题发生的地方。（您是否可能直接调用 setForm，而不是使用 store.commit()？）

标签： vue.js vuex

【解决方案1】：

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

观察者应该做一个深拷贝。如果有多个嵌套级别，则可以使用用于深度克隆/合并的第三方实用程序。一种简单但效率较低的方法是使用内置的JSON 创建深层副本：

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

【讨论】：

非常感谢。我需要使用来自 lodash 的 cloneDeep ;)