使用 v-model 处理 Vuex 和表单

Question

我正在关注 vuex 表单处理的官方 vuex 教程：https://vuex.vuejs.org/guide/forms.html。我基本上复制粘贴了他们建议的 Two-way Computed Property 在底部的实现，但我仍然收到一个错误，说它无法读取未定义的属性“名称”：

[Vue warn]: Error in render: "TypeError: Cannot read property 'name' of undefined"

found in

---> <CustomForm> at src/components/Form.vue
       <Register> at src/views/Register.vue
         <App> at src/App.vue
           <Root>

Form.vue:

<custom-input title="Name" v-model="name" placeholder="Name" required />

computed: {
    name: {
      get () {
        return this.$store.state.form.name
      },
      set (value) {
        this.$store.commit('updateForm', ('name', value))
      }
    }

我尝试在 get 函数中的 return 语句之前console.log(this.$store.state.form.name)，但没有打印出来

Answer 1

如果您想要一个可以更新您的 state.form 对象上的任何值的突变，那么我会做这样的事情。

在mutation中，使用key将值赋给正确的属性

  mutations: {
    updateForm (state, {key, value}) {
      state.form[key] = value;
    }
  }

并且在提交中，使用一个对象作为具有键和值参数的有效负载

computed: {
    name: {
      get () {
        return this.$store.state.form.name
      },
      set (value) {
        this.$store.commit('updateForm', {key:'name', value});
      }
    }

Answer 2

    You can use mapFields to enable to way data binding
      computed: {
        ...mapFields({
          firstName: 'form.name',
          lastName: 'form.lastName',
          phoneNumber: 'form.phoneNumber',
          emailAddress: 'form.emailAddress'
        }),
      },

将此添加到您的突变中 从 'vuex-map-fields' 导入 { updateField };

There is no need to add mutations to update the state this this done directly and using v-model you can bind these properties.