Почему поля хранилища пусты при записи в объект?

Question

[Сергей Бут]

Я делаю апдейт 4х полей (имя, фамилия, емейл и телефон) моего store (VUEX), через инпуты на определенной форме (использую v-model), после чего пихаю эти обновленные поля в объект и записываю его в localStorage.
Проблема:
При записи все необходимые поля store изменяются, я это вижу через vue dev tools, но вот когда я формирую объект из значений этих полей stor-a, то мои поля в этом объекте пусты.
Вопрос:
Как получать значения, а не пустые строки?

компонент

<template>
    <div class="container">
        <form v-if="this.$store.state.isAdding===true">
            <div class="inputWrapper">
                <label for="nameInput">Name :</label>
                <input type="text" id="nameInput" v-model="name">
            </div>
            <div class="inputWrapper">
                <label for="surnameInput">Surname :</label>
                <input type="text" id="surnameInput" v-model="surname">
            </div>
            <div class="inputWrapper">
                <label for="emailInput">E-mail :</label>
                <input type="text" id="emailInput" v-model="email">
            </div>
            <div class="inputWrapper">
                <label for="phoneInput">Phone :</label>
                <input type="text" id="phoneInput" v-model="phone">
            </div>
            <div class="inputWrapper">
                <input type="submit" @click="wasAdded">
            </div>

        </form>
    </div>
</template>




<script>
export default {
    computed :{
        name:{
            get(){
                return this.$store.state.user.name;
            },
            set(value){
                
                this.$store.commit('updateName', value);
            }
        },
        surname:{
            get(){
                return this.$store.state.user.surname;
            },
            set(value){
                
                this.$store.commit('updateSurname', value);
            }
        },
        email:{
            get(){
                return this.$store.state.user.email;
            },
            set(value){
                
                this.$store.commit('updateEmail', value);
            }
        },
        phone:{
            get(){
                return this.$store.state.user.phone;
            },
            set(value){
                
                this.$store.commit('updatePhone', value);
            }
        }

    },
    methods:{
        wasAdded(){
            console.log('--------adding handler activated-------');

            const userObj={
                name:    this.$store.state.user.name,
                surname: this.$store.state.user.surname,
                email:   this.$store.state.user.email,
                phone:   this.$store.state.user.phone
            }
             console.log('constant user has been formed: ',userObj);

                this.$store.state.user.LS.push(userObj);
                console.log('pushed user obj to store as : ',this.$store.state.user.LS);

                localStorage.setItem(userObj.phone,JSON.stringify(userObj));
                console.log('pushed user obj to localStorage');


            if (confirm('All is correct?')){
                this.$store.state.isAdding=false;
                this.$router.push('/')
            }
        }
    }
}
</script>

store

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    user:{
      name:'',
      surname:'',
      email:'',
      phone:'',
      LS:[],
    },
    isAdding:false
  },
  mutations: {
    
    updateName(state, name){
      state.name=name;
    },
    updateSurname(state, surname){
      state.surname=surname;
    },
    updateEmail(state, email){
      state.email=email;
    },
    updatePhone(state, phone){
      state.phone=phone;
    }
  },
  actions: {

  }
})

Answer 1

[0xD34F]

Как выглядит ваш стейт:

state: {
  user:{
    name:'',

Как вы его пытаетесь обновлять:

updateName(state, name){
  state.name=name;

Так что там насчёт вашего name - он должен находиться в корне или быть частью user'а? То же касается и остальных редактируемых пользователем значений.

Непосредственно к вашей проблеме не относится, но глаз режет сильно:

Многовато копипастите.

Четыре вычисляемых свойства, все одинаковые - как-то чересчур. Сделайте одно - объект user будет завёрнут в Proxy, для перехвата установки значений свойств:

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

И мутация тоже будет одна:

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

В v-model, соответственно, указываются свойства объекта:

<input v-model="user.name">
<input v-model="user.surname">
<input v-model="user.email">
<input v-model="user.phone">

Неправильно обновляете стейт.

this.$store.state.user.LS.push(userObj);

this.$store.state.isAdding=false;

Почему напрямую? Сделайте соответствующие мутации.

Comments

[Сергей Бут]

Большое спасибо, проклятая невнимательность...

[Сергей Бут]

Сделайте одно - объект user будет завёрнут в Proxy, для перехвата установки значений свойств:

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

а зачем прокси, можно просто сеттеру передавать несколько параметров?