Как передать в дочерний компонет значения из стейта?

Question

[Александр Флоренко]

Всем привет.

Есть у меня компонент, в котором 2 инпута.

...
<input class="reg__label__input" type="email" disabled 
       :placeholder="$t('registrations.emailPlaceholder')" 
       v-model="$store.state.registrations.user_email">
...
<input class="reg__label__input" :type="passwdType" ref="passwdInput" 
       v-model="$store.state.registrations.password" 
       @input="eventPassInput($event)" 
       @blur="checkPlaceholder()">
...

Этот компонет будет использоваться в нескольких местах.

И v-model всегда будет разный
И всегда из state

Вот не могу понять, как правильно прокинуть данные с родительского компонета, что бы из дочернего я мог их изменять.

Пытался разными способами, и props и computed
Но что то явно не так.

Прошу помощи\совета у вас.
Спасибо!

Answer 1

[0xD34F]

Пытался разными способами <...> что то явно не так

А как мне понять, что у вас не так, если вы не показали, как пытались?

v-model="$store.state.registrations.user_email"

Изменять состояние вне мутаций не следует, сделайте computed свойство, геттер которого будет забирать данные из хранилища, а сеттер вызывать мутацию:

user_email: {
  get() {
    return this.$store.state.registrations.user_email;
  },
  set(val) {
    this.$store.commit('update_user_email', val);
  },
},

v-model всегда будет разный

Имя редактируемого свойства можно оформить в виде параметра компонента, и передавать его в мутацию вместе с новым значением (или передавать объект вида { имя_свойства: значение } и с помощью Object.assign закидывать его в объект в стейте - так за один вызов мутации можно будет обновлять несколько свойств).

Comments

[Александр Флоренко]

Спасибо за развернутый ответ.
По поводу замечаний - принял.

В общем, что есть на текущий момент.

Родительский компонент

<valid-passwd
                    :user_email="user_email"
                    v-model="user_password"

            ></valid-passwd>


 computed: {
            user_email: {
                get() {
                    return this.$store.state.registrations.user_email;
                },
                set(val) {
                    this.$store.commit('update_user_email', val);
                },
            },
            user_password: {
                get() {
                    return this.$store.state.registrations.password;
                },
                set(val) {
                    this.$store.commit('update_user_password', val);
                },
            },
        },

Дочерний

<input class="reg__label__input"
                       :type="passwdType" ref="passwdInput"
                       :value="user_password"
                       @input="eventPassInput($event)"
                       @blur="checkPlaceholder()"
                >
...

 handleSubmit () {
                this.$emit('input', this.user_password)
            },
// user_password лежит в data()
// handleSubmit лежит в eventPassInput()

Но значение не перезаписывается
Что то я упустил.
Мутации написал, возвращают все правильно(в родительском компоненте).

[Александр Флоренко]

Все разобрался

/* Родительский компонент */
<valid-passwd
        :user_email="user_email"
        v-model="user_password"
        :password="this.$store.state.registrations.password"
        v-on:input="updatePass($event)"
></valid-passwd>

methods: {
  updatePass(newPass) {
    this.$set(this.$store.state.registrations, 'password', newPass)
  }

}


/* Дочерний компонент */
props: {
  password: {
    type: String,
    dafault: ""
  }
}

created() {
  this.$set(this, 'user_password', password)
}

methods: {
  handleSubmit () {
    this.$emit('input', this.user_password)
  }
}

Еще раз спасибо за помощь!

[Сергей Кривошеев]

Лучше использовать вычисляемые свойства в компоненте. А они уже будут брать и vuex данные. И с vuex лучше работать через action.

Answer 2

[grinat]

У всех компонентов всегда есть доступ ко всему стейту, его прокидывать никак не нужно.