Axios requestBody 与解析到它的实际 object 不同步

Question

我有一个 VUE 3 应用程序，当我们点击我们的开关时遇到了一些同步问题。

单击切换按钮后，应用程序应该使用更新后的列表调用我们的 API。

问题：单击切换按钮后，计算出的属性中的数据是正确的。然后我们将该数据发送到 parent 组件（在 parent 组件接收到的数据仍然正确）。

Parent 组件调用更新数据的 API。但是在请求body中，数据不正确，那还是旧的列表。如果我再次单击其中一个切换按钮，则发送的数据与上次更新相比是正确的（落后一次）。

以下是应用正在执行的步骤：

一个 vue 组件向 parent 组件发出计算属性

    // CHILD COMPONENT EMITTING DATA TO PARENT

    ____filters.vue___

    <template> 
           <ion-toggle
                @click="changedFilter"
                v-model="filter.selected"
                :checked="filter.selected"
                slot="end">
           </ion-toggle>
    </template>

    
    setup(props, context) {

        const changedFilter = () => {
            console.log(props.searchFiltersArr)   ------> **THIS DATA IS CORRECT**
            context.emit("changedFilter", props.searchFiltersArr);  
        };

        return {
            changedFilter,
            filters: props.searchFiltersArr,
        };
    }

Parent 组件从 child 接收发出的数据并使用 Axios 调用 API。

       ___ SearchFilters.vue _____

       <template>
            <filters
                @changed-filter="updateFilter"
                :searchFiltersArr="searchParameters">
            </filters>
       </template>

export default defineComponent({
    name: "SearchFilters",
    components: { Filters },
    setup() {
        const store = useStore();

        const searchParameters = computed(() => {
            return {
                searchParameters: store.state.user.settings.searchParameters,
            };
        });

        async function updateFilter(search: Array<SearchFilter>) {
            const headers = {
                "Content-type": "application/json",
                Authorization:
                    "Bearer " + "21345",
            };
            const requestBody = {
                user: {
                    name: "",,
                    email: "email@email.com",
                },
                searchParameters: search,
            };
            console.log(requestBody);       -----------> **REQUEST BODY HAS THE CORRECT VALUES FROM CHILD COMPONENT**


            await apiClient.put("/settings", requestBody, {
                headers,
            }); -----> ** REQUEST BODY IN THE ACTUAL REQUEST IS NOT THE UPDATED CONTENT **
        }

        return {
            updateFilter,
            searchParameters: searchParameters.value.searchParameters,
        };
    },
});

更新的数据在我们调用服务之前一直都是正确的。那么 body 是不正确的。怎么会这样？

如果我像这样将 axios 请求包装在设置的超时内，它就可以工作。

setTimeout(function (){ 
axios service }, 2000)

如果您需要任何进一步的信息，请告诉我。这只是一个简化的示例，因为它显示了问题。在实际应用程序中，我们调用一个 vuex 操作，然后调用 api 然后提交更新后的状态。不过问题完全一样。

这个问题有点类似post -

Answer 1

我找到了解决问题的方法。由于vue不能保证事件的顺序（计算应该运行在点击事件之前），我去掉了点击事件并添加了一个watcher代替

Axios requestBody 与解析到它的实际 object 不同步

Axios requestBody is out of sync with actual object getting parsed to it

vue.js

vue-component

axios

vuex

vue-composition-api