Связать форму из vuex?

Question

[tryToFrontEnd]

Я только пробую vue и у меня возник вопрос.
Допустим у меня есть большая форма, которая хранится во vuex.

Каким образом я могу ее связать с формой в компоненте, чтобы не было ошибки "вы не можете изменять state вне мутации"

примерный store

const action = {
  async getForm({ commit }, id) {
    try {
      const response = await axios.get(`url/${id}`);
      commit('setForm', response.data);
    } catch(e) {
      console.error(e);
    }
  },
};

const mutations = {
  setForm(state, payload) {
    state.form = payload;
  },
};

const 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>

Когда пытаюсь менять значение - вылетает ошибка. подскажите пожалуйста

Answer 1

[Sashqa]

Object.assign не копирует глубокую вложенность, а двусторонний биндинг меняет состояние.
Используйте cloneDeep

Comments

[tryToFrontEnd]

Спасибо

Answer 2

[Дима Паутов]

computed: {
  ...mapGetters('form', 'getFormFromStore'),
  form: {
    get () {
      return this.getFormFromStore;
    },
    set (value) {
      this.setForm(value);
    }
  }
},
methods: {
  ...mapActions('form', 'getForm'),
  ...mapMutations('form', 'setForm'),
},

data удалить и watch тоже

Comments

[tryToFrontEnd]

Спасибо. Но есть два вопроса:
1) а если мне нужно допустим очистить какое-то поле?
к примеру, когда данные загрузились, я хочу, чтобы поле form.age = null?
2) у меня почему-то не срабатывает мутация в set, а если быть точным то почему-то просто не попадает в set