@tryToFrontEnd

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

Я только пробую 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>


Когда пытаюсь менять значение - вылетает ошибка. подскажите пожалуйста
  • Вопрос задан
  • 64 просмотра
Решения вопроса 1
@Sashqa
Object.assign не копирует глубокую вложенность, а двусторонний биндинг меняет состояние.
Используйте cloneDeep
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
bootd
@bootd
Гугли и ты откроешь врата знаний!
computed: {
  ...mapGetters('form', 'getFormFromStore'),
  form: {
    get () {
      return this.getFormFromStore;
    },
    set (value) {
      this.setForm(value);
    }
  }
},
methods: {
  ...mapActions('form', 'getForm'),
  ...mapMutations('form', 'setForm'),
},


data удалить и watch тоже
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы