Axios 호출 후 Vuex 상태를 업데이트하는 방법

Axios 호출 후 Vuex 상태를 업데이트하는 방법

Nuxt 앱을 만들고 있으며 로컬 호스트에서 실행 중인 노드 백엔드에서 데이터를 가져오고 있습니다.

getApps.js 플러그인이 있습니다.

export default ({ store }) => {
    store.dispatch('getApps')
}

이는 Vuex에서 getApps 액션을 호출하는 것입니다.

actions: {
  getApps (context) {
    const {commit, state} = context
    commit('setLoading', true)

    let url = `apps?limit=${state.loadLimit}&page=${state.page}`

    if (state.query)
      url = `${url}/q=${state.query}`

    this.$axios.get(url)
      .then((res) => {
        const apps = res.data.apps
        console.log(apps)
        commit('addApps', apps)
        commit('setPage', state.page + 1)
        commit('setLoading', false)

      })
  }
  ...

단, addApps 변환 후 console.log는 실제로 앱 목록을 반환합니다.

addApps (state, payload) {
  state.apps = payload
}

그리고 이게 주(州)의 정의입니다.

state: () => ({
  apps: [],
  query: '',
  loading: false,
  filters: [],
  loadLimit: 25,
  page: 1,
  showFilters: true,
  currentUser: null,
  showLoginModal: false,
  showCreateAppModal: false
})

상태가 업데이트되지 않습니다.제가 알기로는, 이것은 비동기적인 행동 때문입니다.또한 액션을 비동기 중심으로 정리하여 Axios 콜 앞에 대기하도록 했습니다만, 동작하지 않았습니다.

왜 이런 일이 생기는 건가요?코드를 어떻게 구성하면 작동합니까?

문제는 네가 Promise를 몰랐다는 거야.액션이 비동기 HTTP 요청을 호출하지만 호출하지 않았습니다.await바로 그거에요.

그리고 플러그인 섹션의 Promise도 알아야 합니다.이 문제에 대한 해결책은 매우 간단합니다.await.

플러그인/getApps.js

export default async ({ store }) => {
    await store.dispatch('getApps')
}

스토어/...

함수를 만들 수 있습니다.async,그리고.await또는 액션에서 Promise를 반환할 수 있습니다.

actions: {
  getApps (context) {
    ...
    return this.$axios.get(url)
      .then((res) => {
        const apps = res.data.apps

        commit('addApps', apps)
        ...
      })
  },
  ...
}

또는

actions: {
  async getApps (context) {
    ...
    await this.$axios.get(url)
      .then((res) => {
        const apps = res.data.apps

        commit('addApps', apps)
        ...
      })
  },
  ...
}

언급URL : https://stackoverflow.com/questions/54055360/how-to-make-vuex-state-update-after-axios-call