У меня есть компонент с проверкой формы. Это многоэтапная форма оформления заказа. Код ниже предназначен для первого шага. Я хотел бы убедиться, что пользователь ввел текст, сохранил свое имя в глобальном состоянии, а затем отправил его на следующий шаг. Я использую vee-validate и vuex
<template>
<div>
<div class='field'>
<label class='label' for='name'>Name</label>
<div class="control has-icons-right">
<input name="name" v-model="name" v-validate="'required|alpha'" :class="{'input': true, 'is-danger': errors.has('name') }" type="text" placeholder="First and Last">
<span class="icon is-small is-right" v-if="errors.has('name')">
<i class="fa fa-warning"></i>
</span>
</div>
<p class="help is-danger" v-show="errors.has('name')">{{ errors.first('name') }}</p>
</div>
<div class="field pull-right">
<button class="button is-medium is-primary" type="submit" @click.prevent="nextStep">Next Step</button>
</div>
</div>
</template>
<script>
export default {
methods: {
nextStep(){
var self = this;
// from baianat/vee-validate
this.$validator.validateAll().then((result) => {
if (result) {
this.$store.dispatch('addContactInfoForOrder', self);
this.$store.dispatch('goToNextStep');
return;
}
});
}
},
computed: {
name: function(){
return this.$store.state.name;
}
}
}
</script>
У меня есть магазин для обработки состояния заказа и записи имени. В конечном итоге я хотел бы отправить на сервер всю информацию из многоступенчатой формы.
export default {
state: {
name: '',
},
mutations: {
UPDATE_ORDER_CONTACT(state, payload){
state.name = payload.name;
}
},
actions: {
addContactInfoForOrder({commit}, payload) {
commit('UPDATE_ORDER_CONTACT', payload);
}
}
}
Когда я запускаю этот код, я получаю сообщение об ошибке Computed property "name" was assigned to but it has no setter.
Как привязать значение из поля имени к глобальному состоянию? Я хотел бы, чтобы это было постоянным, чтобы даже если пользователь вернется на шаг назад (после нажатия «Следующий шаг»), он увидит имя, которое он ввел на этом шаге.
источник
v-for
на вычисленном без сеттера также выдает это предупреждение.Ответы:
Если вы собираетесь
v-model
использовать вычисляемый объект, ему понадобится сеттер . Все, что вы хотите, чтобы он делал с обновленным значением (возможно, записываете его$store
, учитывая, что ваш получатель извлекает его), вы делаете в сеттере.Если запись обратно в магазин происходит через отправку формы, вы этого не хотите
v-model
, вы просто хотите установить:value
.Если вы хотите иметь промежуточное состояние, в котором оно где-то сохраняется, но не перезаписывает источник при
$store
отправке формы до, вам необходимо создать такой элемент данных.источник
:value
закончилсяv-model
. Спасибо!Так и должно быть.
В вашем компоненте
В вашем магазине
источник
this.nameFromStore
напрямую, вы не можете манипулировать данными.Для меня это менялось.
К чему вычисленное возвращается так;
источник
Я просто хочу упомянуть, почему появляется это предупреждение: всякий раз, когда мы создаем вычисляемое значение, оно является геттером по умолчанию, нам явно нужно определить сеттеры для вычисляемого свойства,
как указано в документации VueJs, Computed Setter
ваше вычисленное свойство будет выглядеть так
Более подходящий способ - это использовать
mapState
для получения имени из магазина и другой вариант, который вы определяете в своем магазине и используетеmapGetters
для извлечения имени из магазина,Важно знать: геттеры в магазине используются, когда вы хотите получить вычисленные данные из хранилища, тогда вы определяете логику в геттерах, которые получают вычисленные данные.
пример геттера
этот геттер проверяет ваше состояние на наличие активного пользователя и возвращает true, если loggedIn, и false, если не loggedIn,
позже во всем приложении мы
mapGetters
извлекаем этоisLoggedIn
свойство и добавляем проверки в соответствии с этимнадеюсь, что кто-то найдет эту помощь полной :)
источник