Vuex-Computed 属性“ name”被分配到，但它没有 setter

我有一个带有表单验证的组件。这是一个多步结帐表单。下面的代码用于第一步。我想验证用户输入了一些文本，将它们的名称存储在全局状态中，然后发送到下一步。我用的是 Vee 确认和 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.

如何将名称字段中的值绑定到全局状态？我希望这是持久的，以便即使一个用户回到一个步骤(在点击“下一步”) ，他们将看到他们在这个步骤中输入的名称

229849 次浏览
小开
最佳答案

如果你要计算 v-model它需要 塞特。无论您希望它对更新后的值做什么(可能将它写到 $store，考虑到您的 getter 从中提取它) ，都可以在 setter 中执行。

如果通过表单提交将其写回存储，则不需要设置 v-model，只需设置 :value。

如果你想要一个居间态，它被保存在某个地方，但是在表单提交之前不会覆盖 $store中的源代码，你需要创建这样一个数据项。

小开

对我来说，一切都在改变。

this.name = response.data;

到什么计算返回如此;

this.$store.state.name = response.data;
小开

应该是这样的。

在你的 组件里

computed: {
...mapGetters({
nameFromStore: 'name'
}),
name: {
get(){
return this.nameFromStore
},
set(newName){
return newName
}
}
}

在你的 商店里

export const store = new Vuex.Store({
state:{
name : "Stackoverflow"
},
getters: {
name: (state) => {
return state.name;
}
}
}
小开

我也面临着同样的错误

已将计算属性“ callRingtatus”分配给它，但它没有 setter

这里是一个示例代码根据我的情况

computed: {


callRingtatus(){
return this.$store.getters['chat/callState']===2
}


}

我将上面的代码更改为以下方式

computed: {


callRingtatus(){
return this.$store.state.chat.callState===2
}
}

从 vuex 存储状态获取值，而不是从计算钩子内的 getter 获取值

小开

我有这样一个错误时，得到的价值从 store，在 computed，通过 ...mapState(['sampleVariable'])，作为你。然后我在 <script>中使用了 this.sampleVariable，在 <template>中使用了 sampleVariable。

解决这个问题的是 data()中的 return this，将它分配给一个分离的变量，并在 component中重复使用新创建的变量，如下所示:

data() {
return {
newVariable: this.$store.state.sampleVariable,
}
}

然后，我将组件中的引用从 sampleVariable更改为 newVariable，错误消失了。


提交答案