Vuex - 计算属性“名称"被分配给但它没有二传手 [英] Vuex - Computed property "name" was assigned to but it has no setter
问题描述
我有一个带有表单验证的组件.这是一个多步骤结帐表格.下面的代码是第一步.我想验证用户是否输入了一些文本，将他们的名字存储在全局状态中，然后发送到下一步.我正在使用 vee-validate 和 vuex
<div><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><p class="help is-danger" v-show="errors.has('name')">{{ errors.first('name') }}</p>
<div class="field pull-right"><button class="button is-medium is-primary" type="submit" @click.prevent="nextStep">下一步</button>
</模板><脚本>导出默认{方法: {下一步(){var self = this;//来自 baianat/vee-validatethis.$validator.validateAll().then((result) => {如果(结果){this.$store.dispatch('addContactInfoForOrder', self);this.$store.dispatch('goToNextStep');返回;}});}},计算:{名称:函数(){返回 this.$store.state.name;}}}
我有一个用于处理订单状态和记录名称的商店.最终，我想将多步表单中的所有信息发送到服务器.
export default {状态: {姓名: ''，},突变:{UPDATE_ORDER_CONTACT(状态，有效载荷){state.name = 有效载荷.name;}},动作:{addContactInfoForOrder({commit}, payload) {提交('UPDATE_ORDER_CONTACT'，有效载荷)；}}}当我运行此代码时，我收到一个错误，指出计算属性名称"已分配给但没有设置器.
如何将 name 字段中的值绑定到全局状态?我希望这是持久的，这样即使用户返回一个步骤(点击下一步"后)，他们也会看到他们在这一步输入的名称
如果你要 v-model 一个计算，它需要一个 setter.无论您希望它对更新后的值做什么(可能将它写入 $store，考虑到这是您的 getter 从中提取的)，您都可以在 setter 中执行.
如果通过表单提交将它写回商店，你不想v-model，你只想设置:value.
如果你想要一个中间状态，它保存在某个地方，但在提交表单之前不会覆盖 $store 中的源，你需要创建这样一个数据项.
I have a component with some form validation. It is a multi step checkout form. The code below is for the first step. I'd like to validate that the user entered some text, store their name in the global state and then send then to the next step. I am using vee-validate and 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>
I have a store for handling order state and recording the name. Ultimately I would like to send all of the info from multi step form to the server.
export default {
state: {
name: '',
},
mutations: {
UPDATE_ORDER_CONTACT(state, payload){
state.name = payload.name;
}
},
actions: {
addContactInfoForOrder({commit}, payload) {
commit('UPDATE_ORDER_CONTACT', payload);
}
}
}
When I run this code I get an error that Computed property "name" was assigned to but it has no setter.
How do I bind the value from the name field to the global state? I would like this to be persistent so that even if a user goes back a step (after clicking "Next Step") they will see the name they entered on this step
If you're going to v-model a computed, it needs a setter. Whatever you want it to do with the updated value (probably write it to the $store, considering that's what your getter pulls it from) you do in the setter.
If writing it back to the store happens via form submission, you don't want to v-model, you just want to set :value.
If you want to have an intermediate state, where it's saved somewhere but doesn't overwrite the source in the $store until form submission, you'll need to create such a data item.
这篇关于Vuex - 计算属性“名称"被分配给但它没有二传手的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
