Question

我正在vue-cli项目中获取一些数据。

我正在使用Vuex存储数据。

除了我得到一个空数组的事实（我已经签入邮递员）之外，这一切都成功运行了。

正如您在我的操作中看到的那样，我已在if语句中提交了我的内容，目前已将其注释掉并移走了。但是在其中运行时，我得到了Promise的返回。作为当前版本的代码，我得到了一个空数组。

我真的看不到我的错误是什么，所以我最好的选择是你们能够看到我所缺少的。

首先我要采取行动：

export default {

async getProLanguages({ commit }) {
    commit(C.PROLANGAUGE_DATA_PENDING);
    try {
        const res = await fetch('https://dev-webapp-kimga5xexrm3o.azurewebsites.net/api/ProLang', {
            method: 'GET',
            mode: 'cors',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'Authorization': 'Bearer xxx'
            }
        });
        if (res.status === 200) {
            console.log(res);
            // commit(C.PROLANGAUGE_DATA_SUCCESS, JSON.stringify(res.json()));
        }
        else {
            commit(C.PROLANGAUGE_DATA_NO_CONTENT);
        }
        console.log(res)
        return commit(C.PROLANGAUGE_DATA_SUCCESS, JSON.stringify(res.json()));
    }
    catch (e) {
        commit(C.PROLANGAUGE_DATA_FAILURE);
    }
}

我的突变：

 /**
 *  Indicates that programming language has succeded 
 * 
 * @param state 
 * @param  payload 
 */
[C.PROLANGAUGE_DATA_SUCCESS](state, payload) {
    state.programmingLanguages = { ...state.programmingLanguages, loading: false, error: false, noContent: false, items: payload }
},

我有默认状态，该状态已导入state.js：

const getDefaultState = () => ({
  programmingLanguages: {
    loading: false,
    error: false,
    noContent: false,
    items: [
      {
        id: undefined,
        name: undefined
      }
    ]
  }
});

我用beforeRouteEnter叫我的动作：

beforeRouteEnter(to, from, next) {
  store.dispatch('programmingLanguages/getProLanguages').then(() => {
    next();
  });
}

最后在我的组件中，从Vuex导入mapState：

computed: {
  ...mapState({
    prolangs: state => state.programmingLanguages.programmingLanguages.items
  })
}

Answer 1

我认为某事像items = await res.json()，然后提交items可能是一种前进的方式（确保所有诺言都得到解决）。

Vue，抓取会返回空数组

1 个答案: