Как использовать в v-model свойства объекта из хранилища?

Question

[myskypesla]

В store.js есть объект:

user: {
  firstName: '',
  lastName: '',
  age: '',
}

Есть компонент:

<template>
  form
    input(type='text', placeholder='firstName')
    input(type='text', placeholder='lastName')
    input(type='text', placeholder='age')
</template>

Надо с помощью computed, а также get и set в нем передать значение в store.js, чтобы это выглядело примерно так:

<template>
  form
    input(type='text', placeholder='firstName', v-model='user.firstName')
    input(type='text', placeholder='lastName', v-model='user.lastName')
    input(type='text', placeholder='age', v-model='user.age')
</template>

<script>
export default {
  computed: {
    user: {
      get() {
        return this.$store.state.user;
      },
      set(value) {
        this.$store.commit('saveUser', value);
      },
    }
  },
};
</script>

Answer 1

[0xD34F]

Вычисляемое свойство будет представлять собой объект из стейта, завёрнутый в Proxy, чтобы перехватывать установку значений свойств и вызывать мутацию:

user() {
  return new Proxy(this.$store.state.user, {
    set: (target, prop, value) => {
      this.$store.commit('updateUser', { [prop]: value });
      return true;
    },
  });
},

Соответственно, сама мутация:

updateUser(state, payload) {
  Object.assign(state.user, payload);
},

https://jsfiddle.net/jgv3h15k/

Comments

[Evgenii Borovoi]

Подскажите пожалуйста, если при такой схеме, ругается в strict mode, что делать?
Error in callback for watcher "function () { return this._data.$$state }": "Error: [vuex] do not mutate vuex store state outside mutation handlers."
Отключать его, или как-то можно по другому решить?
А работает правильно.

[0xD34F]

Evgenii Borovoi, не подскажу. У меня не ругается. И у вас не должен. Если ругается - значит, что-то не так делаете.