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.
如何将名称字段中的值绑定到全局状态？我希望这是持久的，这样即使用户返回一步（单击“下一步”之后），他们也会看到他们在这一步输入的名称
v-for 也会引发此警告。
如果您要 v-model 计算，它需要 setter。无论您希望它对更新后的值做什么（可能将其写入 $store，考虑到这是您的 getter 从中提取它的内容），您都可以在 setter 中执行此操作。
如果通过表单提交将其写回商店，您不想设置 v-model，只需设置 :value。
如果您想要一个中间状态，它保存在某个地方，但在提交表单之前不会覆盖 $store 中的源，您需要创建这样一个数据项。
应该是这样的。
在您的组件中
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;
}
}
}
this.nameFromStore，则无法操作数据。
对我来说，它正在改变。
this.name = response.data;
计算返回的结果是什么；
this.$store.state.name = response.data;
我在通过 ...mapState(['sampleVariable']) 从 store 获取值时遇到了这样的错误，在 computed 中，就像你一样。然后我在 <script> 中使用了 this.sampleVariable，在 <template> 中使用了 sampleVariable。
解决此问题的方法是在 data() 中return this，将其分配给一个单独的变量，然后在 component 中重用新创建的变量，如下所示：
data() {
return {
newVariable: this.$store.state.sampleVariable,
}
}
然后，我将组件中的引用从 sampleVariable 更改为 newVariable，错误就消失了。
我面临完全相同的错误
计算属性“callRingtatus”已分配给但它没有设置器
这是根据我的场景的示例代码
computed: {
callRingtatus(){
return this.$store.getters['chat/callState']===2
}
}
我把上面的代码改成下面的方式
computed: {
callRingtatus(){
return this.$store.state.chat.callState===2
}
}
从 vuex 存储状态而不是计算钩子中的 getter 获取值
关注公众号
不定期副业成功案例分享
