Vuex и обработка форм с использованием v-модели

Question

Я следую официальному учебнику vuex по обработке форм vuex: https://vuex.vuejs.org/guide/forms.html. Я в основном скопировал и вставил их предложенную реализацию Двухстороннее вычисляемое свойство внизу, но все равно получаю ошибкуговоря, что он не может прочитать свойство 'name' из неопределенного:

[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))
      }
    }

Я пытался console.log(this.$store.state.form.name) перед оператором return в getфункция, но ничего не печатает так

Answer 1

Если вы хотите иметь мутацию, которая может обновить любое значение на вашем state.form объекте, тогда я бы сделал что-то вроде этого.

В мутации используйте клавишу, чтобы назначить значение дляright свойство

  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'
        }),
      },

Добавьте это к вашим мутациям import {updateField} из 'vuex-map-fields';

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