Vuex - "name"被分配到的计算属性，但它没有 setter

Question

我的组件具有某些表单验证。这是一个多步骤结帐表格。下面的代码是第一步。我想验证用户输入一些文本，将其名称存储在全局状态，然后发送到下一步。我正在使用vee valites和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.

的错误

如何将价值从名称字段绑定到全局状态？我希望这是持久的，以便即使用户返回一步（单击"下一步"之后），他们也会看到他们在此步骤上输入的名称

Answer 1

如果您要计算出v-model A，则需要一个设置器。无论您想使用更新的值（考虑到您的Getter从中摘下的），无论您使用它是否将其写入$store）。

如果将其写回商店通过表单提交发生，您不想 v-model，您只想设置:value。

如果您想具有中间状态，该状态被保存在某个地方，但不会覆盖$store中的源，直到表单提交为止，您需要创建此类数据项。

Answer 2

应该像这样。

在您的中

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;
                 }
         }
}

Answer 3

对我来说，它正在改变。

this.name = response.data;

到计算的返回;

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

Answer 4

我像您一样从 store， computed中的 CC_7中获得值时出现了错误。然后，我在<script>中使用了this.sampleVariable和<template>中的sampleVariable。

解决该问题的原因是return在data()中，将其分配给分离的变量，并在component上重复使用新创建的变量，例如：

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

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

Answer 5

我正面临完全相同的错误

计算属性" callringtatus"被分配给，但没有固定器

这是根据我的方案

的示例代码

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

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

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

从Vuex存储状态获取值，而不是计算挂钩中的getters