Javascript 在Vue中操作完成之前返回与输入值相同的值的Getter

我为功能X创建了一个组件和一个模块，并使用Vuex进行状态管理。代码在每次第一次插入时都有效，但在此之后，Getter函数总是在操作结束并提交变异之前返回相同的输入值

例如： 1-一切都是[0,0,0]，Getter是[0,0,0]。在第一个位置插入9，然后插入值。 2-第二次，检查插入的值是否等于状态上的值返回true，因此我们必须删除此验证

顺便说一句，状态会继续被修改，而不需要将更改提交给mutation，当我们查看从状态中检索值的Getter时，插入的值已经由Getter返回

有人知道怎么解决这个问题吗

这是密码

组成部分：

Vue.component('profundidade-cell', {

    data: function () {
        return {
            valorProfundidade: [0, 0, 0],
            id: this.face + '-' + this.dente,
            ids: [
                this.face + '-profundidade-sondagem-' + this.dente + '-1',
                this.face + '-profundidade-sondagem-' + this.dente + '-2',
                this.face + '-profundidade-sondagem-' + this.dente + '-3'
            ],
            changedId: null,
            valorInserido: null,
            valorAnt: null,
        }
    },

    props: {
        arcada: String,
        sextante: String,
        dente: String,
        face: String,
        face_json: String,
        max_length: Number,
        min_value: Number,
        max_value: Number,
    },

    computed: {
        profundidadeSondagem() {
            return store.getters['profundidadeSondagem/profundidadeSondagem']({arcada: this.arcada,
                sextante: this.sextante, dente: "dente_" + this.dente, face: this.face_json});
        },

        presente() {
            return store.getters.dentePresente({arcada: this.arcada, sextante: this.sextante,
                dente: "dente_" + this.dente});
        }

    },

    created: function() {
        this.debouncedAlterarProfundidade = _.debounce(this.alterarValorProfundidadeSondagem, 400);
        this.$root.$on("vuex-carregado", this.carregar);
    },

    methods: {

        getValue(e) {
            this.changedId = e.target.id;
            this.valorInserido = e.target.value;

            this.debouncedAlterarProfundidade();


        },

        alterarValorProfundidadeSondagem() {

            let modelRefs = {};

            let patologia = {
                arcada: this.arcada,
                sextante: this.sextante,
                dente: "dente_" + this.dente,
                face: this.face_json,
                valor: this.valorProfundidade,
                modelRefs: modelRefs,
                id: this.changedId,
                valorInserido: this.valorInserido,
            };

            store.dispatch('profundidadeSondagem/MODIFY', patologia).catch(() => {

                this.valorProfundidade = this.profundidadeSondagem;
            })

        },

        carregar(){
            this.valorProfundidade = this.profundidadeSondagem;
        }

    },


    template: `
        <div>
            <input type="text" :id=ids[0] v-on:input.prevent="getValue($event)" :maxlength=max_length v-model=valorProfundidade[0] class="periograma-input col l4" v-bind:class="{ 'invisible': !presente }" />
            <input type="text" :id=ids[1] v-on:input.prevent="getValue($event)" :maxlength=max_length v-model=valorProfundidade[1] class="periograma-input col l4" v-bind:class="{ 'invisible': !presente }" />
            <input type="text" :id=ids[2] v-on:input.prevent="getValue($event)" :maxlength=max_length v-model=valorProfundidade[2] class="periograma-input col l4" v-bind:class="{ 'invisible': !presente }" />    
        </div>
    `

});

我猜你的问题就在这里： TL；博士-你把你的勇气传递给你的行动。 只是猜测-因为我无法调试你的代码

当您从rootState[…]分配引用，从而在第一次运行后更改组件中rootState[…]的属性时

因此，您的代码的行为如下：

        let patologia = {
            arcada: this.arcada,
            sextante: this.sextante,
            dente: "dente_" + this.dente,
            face: this.face_json,
            

---

一个解决方案可以是这样的：valorProfundidade=this.defoundidadesondagem.slice；只要它是数组或对象。分配{}，…-所以你要防止引用

就是这样。我使用slice在数组的内存中创建了一个新副本，这很有效！

        store.dispatch('profundidadeSondagem/MODIFY', patologia).catch(() => {

            this.valorProfundidade = this.profundidadeSondagem;
        })

        let patologia = {
            arcada: this.arcada,
            sextante: this.sextante,
            dente: "dente_" + this.dente,
            face: this.face_json,
            

          // valor: this.valorProfundidade,
          ///* same as */ valor: this.profundidadeSondagem,
          /* same as */ valor: this.$store.getters['profundidadeSondagem/profundidadeSondagem'](...),

            modelRefs: modelRefs,
            id: this.changedId,
            valorInserido: this.valorInserido,
        };