Vuex - присвоено значение "имя" вычисляемого свойства, но у него нет сеттера
У меня есть компонент с некоторой проверкой формы. Это многоступенчатая форма оформления заказа. Код ниже для первого шага. Я хотел бы подтвердить, что пользователь ввел какой-либо текст, сохранил свое имя в глобальном состоянии и затем отправил на следующий шаг. Я использую 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.
Как связать значение из поля имени с глобальным состоянием? Я бы хотел, чтобы это было постоянным, так что даже если пользователь вернется на шаг (после нажатия "Следующий шаг" ), он увидит имя, которое они ввели на этом шаге.
Ответы
Ответ 1
Если вы собираетесь v-model
вычислить, ему нужен setter. Независимо от того, что вы хотите сделать с обновленным значением (возможно, напишите его в $store
, учитывая, что ваш геттер тянет его), вы делаете в установщике.
Если запись в хранилище происходит с помощью отправки формы, вы не хотите v-model
, вы просто хотите установить :value
.
Если вы хотите иметь промежуточное состояние, где оно где-то сохранено, но не перезаписывает источник в $store
до отправки формы, вам необходимо создать такой элемент данных.
Ответ 2
Для меня это изменилось.
this.name = response.data;
К чему так вычисляется возвращается;
this.$store.state.name = response.data;
Ответ 3
В дополнение к ответу Roy J кажется, что использование v-for
при вычислении без сеттера также вызывает это предупреждение.