Vuex - 计算属性“名称”已分配给但它没有设置器

Question

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

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

原文由 Connor Leech 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果你要去 v-model 计算，它需要一个 setter 。无论您希望它对更新的值做什么（可能将其写入 $store ，考虑到这是您的 getter 从中提取的内容）您在 setter 中执行。

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

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

原文由 Roy J 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

原文由 OhhhThatVarun 发布，翻译遵循 CC BY-SA 4.0 许可协议