状态改变后，组件数据不会通过POST函数获取新结果来更新新值

Question

下面的Vue.js 2代码是我发送到后端的数据形式。我使用 vuex 来处理我的数据状态。我使用POST函数后，后端返回的结果改变了sampleId的数据值。该值由数据库创建，每次有新数据时会自动加一。我在使用 POST 函数后使用控制台日志检查我的状态，并且状态成功更改（这意味着它不仅由后端成功创建，而且还成功将其发送回前端。）。但是，按下按钮后，我仍然无法在前端看到sampleId的更新结果。任何人都可以帮我修改我的代码吗？

<form @submit.prevent="handleSubmit">
                    <h2 class="newSample">2. Add New Sample Data</h2>
                    <div class="form-group">
                        <label for="productName">Product Name</label>
                        <input type="text" v-model="sample.productName" name="productName" v-validate="'required'" class="form-control" :class="{ 'is-invalid': submitted && errors.has('productName') }" />
                        <div v-if="submitted && errors.has('productName')" class="invalid-feedback">{{ errors.first('productName') }}</div>
                    </div>

                    <div class="form-group">
                        <label for="OracleItemNum">Oracle Item Number</label>
                        <input type="number" v-model="sample.OracleItemNum" name="OracleItemNum" class="form-control" :class="{ 'is-invalid': submitted && errors.has('OracleItemNum') }" />
                        <div v-if="submitted && errors.has('OracleItemNum')" class="invalid-feedback">{{ errors.first('OracleItemNum') }}</div>
                    </div>
                    <div class="form-group">
                        <label for="batchSize">Batch Size</label>
                        <input type="number" v-model="sample.batchSize" name="batchSize" class="form-control" :class="{ 'is-invalid': submitted && errors.has('batchSize') }" />
                        <div v-if="submitted && errors.has('batchSize')" class="invalid-feedback">{{ errors.first('batchSize') }}</div>
                    </div>
                    <div class="form-group">
                        <label for="numCntrRecv">Number of Containers Received</label>
                        <input type="number" v-model="sample.numCntrRecv" name="numCntrRecv" class="form-control" :class="{ 'is-invalid': submitted && errors.has('numCntrRecv') }" />
                        <div v-if="submitted && errors.has('numCntrRecv')" class="invalid-feedback">{{ errors.first('numCntrRecv') }}</div>
                    </div>
                    <div class="form-group">
                        <label for="aqlLevel">AQL Level</label>
                        <select name="aqlLevel" v-model="sample.aqlLevel">
                            <option value="I" v-if="samples.all.qualified == 'I' || !checkOracleItemNum.length || samples.all.qualified == 'S-3'">I</option>
                            <option value="II" v-if="samples.all.qualified == false || !checkOracleItemNum.length" >II</option>
                            <option value="III" v-if="samples.all.qualified == 'I' || !checkOracleItemNum.length">III (Tighted Level)</option>
                            <option value="S-3" v-if="samples.all.qualified == 'S-3' || !checkOracleItemNum.length || samples.all.qualified == 'I'" >S-3</option>
                        </select>
                    </div>
                    <div class="form-group" v-if="sample.aqlLevel == 'I'">
                        <label for="fullOrReduced">FULL or REDUCED</label>
                        <select name="fullOrReduced" v-model="sample.fullOrReduced" v-if="sample.fullOrReduced !== null">
                            <option value="FULL" v-if="sample.aqlLevel == 'I'">FULL</option>
                            <option value="REDUCED" v-if="sample.aqlLevel == 'I'">REDUCED</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <button class="btn btn-primary" :disabled="!sample.productName.length || !sample.OracleItemNum.length || !sample.batchSize.length || !sample.numCntrRecv.length || !sample.aqlLevel.length">Add</button>
                        <img v-show="sample.adding" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />
                    </div>
                </form>
                <!-- TODO not showing sampleId instantly -->
                <div class="qualified" v-if="(samples.all.sample !== undefined || samples.all.sample !== null) && submitted === true && samples.all.sample.sampleId !== undefined" >The Sample ID is {{samples.all.sample.sampleId}} </div>

表单页面的Javascript部分：

<script>
import { mapState, mapActions } from 'vuex'

export default {
    data () {
        return {
            sample:{
                productName: '',
                OracleItemNum: 0,
                batchSize: 0,
                numCntrRecv: 0,
                aqlLevel: '',
                fullOrReduced: '',
                sampleSize: 0,
                referenceNum: 0,
                sampleId: 0
            },
            checkOracleItemNum: 0,
            showIorS3: false,
            submitted: false,
            showResult: false,
            canNotEmpty: false,
            sampleId: 0
        }
    },
    created () {
        //this.getSampleId();
    },
    computed: {
        
        // workable
        // ...mapState({
        //     account: state => state.account, 
        //     users: state => state.users.all}, ['sample'])
        ...mapState({
            account: state => state.account, 
            users: state => state.users.all,
            samples: state => state.samples
        }),
        count() {
            console.log(this.$store.samples);
        }
    },
    methods: {
        ...mapActions('samples', {
            addNewSample: 'addNewSample',
            testQualified: 'testQualified'
        }),
        ...mapActions('users', {
            getAllUsers: 'getAll',
            deleteUser: 'delete'
        }),
        handleSubmit (e) {
            this.submitted = true;
            this.addNewSample(this.sample);
        },
        handleTest (e){
            //this.qualified = true;
            // if(this.checkOracleItemNum == ''){
            //     sample.qualifying = false
            // }
            this.testQualified(this.checkOracleItemNum);
            //console.log(e.target.elements.);
            //console.log(this.testQualified(this.checkOracleItemNum));            
        },
        getResult(){
            this.showResult = true;
        },
        reload(){
            this.$forceUpdate();
        }
    },
    watch: {
        sampleId(newValue, oldValue) {
        console.log(`Updating from ${oldValue} to ${newValue}`);

        // Do whatever makes sense now
        // if (newValue === 'success') {
        //     this.complex = {
        //     deep: 'some deep object',
        //     };
        // }
    }}
};
</script>

这就是我在商店的动作部分所做的：

addNewSample({dispatch, commit}, sample){
        commit('addNewSampleRequest', sample);
        sampleService.addNewSample(sample).then(
            sample => {
                console.log(sample.sampleId);
                if(sample != null && sample.sampleId != undefined || sample.sampleId != null) commit('addNewSampleSuccess', sample);
            },
            error => {
                commit('addNewSampleFailure', error);
                dispatch('alert/error', error, { root: true });
            }
        )
    },

这是代码的突变部分：

    addNewSampleRequest(state, sample) {
        state.sample = sample;
    },
    addNewSampleSuccess(state, sample) {
        state.sample = sample;
        console.log(state);
    },
    addNewSampleFailure(state, error) {
        state.sample = null;
    }

我将index.js文件添加到下面来回答@Phil的问题。 （该文件上面的代码写在samples.module.js文件中）

import Vue from 'vue';
import Vuex from 'vuex';

import { alert } from './alert.module';
import { account } from './account.module';
import { users } from './users.module';
import { samples } from './samples.module';

Vue.use(Vuex);

export const store = new Vuex.Store({
    modules: {
        alert,
        account,
        users,
        samples
    }
});

这是我按下按钮后在控制台中看到的内容。 130是addNewSample()函数中console.log打印的sampleId，下面的对象是后端返回的新状态。

我的sample.module.js 文件如下所示：

import { sampleService } from '../_services';
const state = {
    all: {}
};
const actions = {
    getSampleResult({commit}, id){
        sampleService.getSampleResult(id).then(
            sample => commit('getSampleResultSuccess', id),
            error => commit('getSampleResultFailure', {id, error: error.toString()})
        );
    },
    getAllSamples({commit}){
        commit('getAllSampleRequest');
        sampleService.getAllSamples().then(
            sample => commit('getAllSampleSuccess', sample),
            error => commit('getAllSampleFailure', error)
        );
    },
    addNewSample({dispatch, commit}, sample){
        commit('addNewSampleRequest', sample);
        sampleService.addNewSample(sample).then(
            sample => {
                console.log(sample);
                if(sample != null && sample.sampleId != undefined || sample.sampleId != null) commit('addNewSampleSuccess', sample);
            },
            error => {
                commit('addNewSampleFailure', error);
                dispatch('alert/error', error, { root: true });
            }
        )
    },
    testQualified({commit}, OracleItemNum){
        sampleService.testIfNewOrQualified(OracleItemNum).then(           
            isQualified => {
                console.log(isQualified)
                commit('testQualifiedSuccess', isQualified)
            }           
        )
    }
}

const mutations = {
    getAllSampleRequest(state) {
        state.all = { loadingSamples: true };
    },
    getAllSampleSuccess(state, samples) {
        console.log(state);
        state.all = { samples: samples };
    },
    getAllSampleFailure(state, error) {
        state.all = { error };
    },
    // getSampleResultRequest(state, id) {
    //     console.log(state.all.samples);
    //     console.log(id);
    //     // state.all.samples = state.all.samples.map(sample =>
    //     //     sample.sampleId === id
    //     //         ? { ...sample, getSampleResult: true }
    //     //         : sample
    //     // )
    //     // console.log(state);
    // },
    getSampleResultSuccess(state, id) {
        console.log(id);
        console.log(state);
        state.all.samples = state.all.samples.filter(sample => sample.sampleId == id)
        console.log(state);
    },
    getSampleResultFailure(state, {id, error}) {
        // state.all.samples = state.samples.map(sample => {
        //     if (sample.sampleId !== id) {
        //         // make copy of user without 'deleting:true' property
        //         const { deleting, ...sampleCopy } = sample;
        //         // return copy of user with 'deleteError:[error]' property
        //         return { ...sampleCopy, deleteError: error };
        //     }

        //     return sample;
        // })     
    },
    // getSampleIdRequest(state, sample){
    //     state.status = {getSampleId: true};
    //     state.sample = sample;
    // },
    // getSampleIdSuccess(state, sample){
    //     state.status = {getSampleId: true};
    //     state.sample = sample;
    // },
    // getSampleIdFailure(state, {id, error}){
    //     state.status = {};
    //     state.sample = null;
    // },
    testQualifiedSuccess(state, isQualified){
        state.all = {qualified: isQualified};
        console.log(state);
    },

    addNewSampleRequest(state, sample) {
        state.all.samples = sample;
    },
    addNewSampleSuccess(state, sample) {
        state.all.sample = sample;
        console.log(state);
    },
    addNewSampleFailure(state, error) {
        state.all.sample = null;
    }
};

export const samples = {
    namespaced: true,
    state,
    actions,
    mutations
};

Answer 1

在突变中，您正在更新“sample”单数形式状态中的值，但尝试使用名称“samples”复数形式状态在映射状态中访问。