javascript - 将 resolve() 添加到 vuex 操作会中断组件中的数据加载

Question

我的 VueX 商店中有以下操作添加 resolve() 使组件无法加载商店数据

    fetch_resources({ commit, rootState }) {
        return new Promise((resolve, reject) => {
            const url = '/api/resource/';

            rootState.axios_api.get(url)
                .then((response) => {
                    commit('SET_RESOURCES', response.data);
                    resolve(response.data);  // Adding this line breaks my component 
                }).catch((error) => {
                    reject(setErrorServer(error));
                });
        });
    },

数据在存储中加载和变异，但不会在挂载时由此操作调用的组件加载。

我应该如何修复我的 then().catch() 以使其工作？

    mounted() {
        this.fetch_resources().then(() => {
        }).catch((error) => {
            showErrorModal(error);
        });
    },

``̀̀̀`

标签： javascriptvuejs2es6-promise

Answer 1

Axios 自己返回 Promise，所以你不需要包装它：

    fetch_resources({ commit, rootState }) {
       
            const url = '/api/resource/';

            // also you may make a closure to param variable
            let com = commit

            return rootState.axios_api.get(url)
                .then((response) => {
                    commit('SET_RESOURCES', response.data);
                    // com('SET_RESOURCES', response.data);
                    resolve(response.data);  // Adding this line breaks my component 
                }).catch((error) => {
                    reject(setErrorServer(error));
                });

    },