Vuex 액션을 적절하게 체인하여 콜 간에 상태를 올바르게 변환하려면 어떻게 해야 합니까?

Vuex 액션을 적절하게 체인하여 콜 간에 상태를 올바르게 변환하려면 어떻게 해야 합니까?

나는 가지고 있다Vuex를 정의하는 어플리케이션의 스토어getters,actions그리고.mutations이제 한 동작은 API에 데이터를 요청하고 수신한 데이터를 상태를 조작하는 변환에 커밋합니다.이 특정 액션(이름 지정)initConfiguration)는 후속 액션을 실행하기 전에 스토어에 적용해야 하는 메타데이터 및 설정을 로드합니다.루트 컴포넌트에는 초기화 코드가 포함되어 있습니다.mountedlifetime-hook 기능은 다음과 같습니다.

new Vue({
  el: '#app',
  store,
  render: h => h(App),
  mounted() {
    store.dispatch('initConfiguration').then(() => {
      store.dispatch('loadData')
    })
  }
})

내가 직면하고 있는 문제는 다음 조치 전까지 상태가 변경되지 않았다는 것이다.loadData가 호출되어 데이터가 없거나 초기화되지 않았기 때문에 이 액션은 비참하게 실패합니다.나중에 몇 가지 액션이 발생할 수 있기 때문에 디스패치는 피하고 싶습니다.loadData에서 바로 행동하다initConfigurationaction (그리고 내가 배운 대로, 돌연변이에 의한 action의 호출은 피해야 한다.)

이게 제 스토어 실장입니다...

export default Vuex.Store({
  state: {
    metadata: {
      initialized: false,
      config: { }
    }
  },
  mutations: { 
    setConfiguration(state, config) {
      state.metadata.config = config
      state.metadata.initialized = true
    }
  },
  actions: {
    initConfiguration({commit}) {
      axios.get('configuration').then((response) => {
        commit('setConfiguration', response.data)
      })
    },
    loadData({commit, state}) {
      axios.get(state.metadata.config.tenantDataUrl) // crashes here due to undefined data
        .then((response) => { ... });
    }
  }
})

액션을 올바르게 체인하고 그 사이에 상태가 업데이트되도록 하려면 어떻게 해야 합니까?

당신은 당신의 공리적인 약속을 돌려줘야 합니다.각 Axios 호출에 반환을 추가하면 기존 코드가 작동합니다.

이렇게 다시 쓸 수도 있습니다.

new Vue({
  el: '#app',
  store,
  render: h => h(App),
  async mounted() {
    await store.dispatch('initConfiguration')
    await store.dispatch('loadData')    
  }
})

.

export default Vuex.Store({
  state: {
    metadata: {
      initialized: false,
      config: { }
    }
  },
  mutations: { 
    setConfiguration(state, config) {
      state.metadata.config = config
      state.metadata.initialized = true
    }
  },
  actions: {
    async initConfiguration({commit}) {
      const response = await axios.get('configuration')
      commit('setConfiguration', response.data)
    },
    async loadData({commit, state}) {
      const response = await axios.get(state.metadata.config.tenantDataUrl) // crashes here due to undefined data
     // do whatever with response, or try/catch
    }
  }
})

각 단계에서 vue 템플릿을 업데이트해야 하는 경우 이 항목을 추가합니다.

new Vue({
  el: '#app',
  store,
  render: h => h(App),
  async mounted() {
    await store.dispatch('initConfiguration')
    await this.$nextTick() // cause vue to run getters and update computeds
    await store.dispatch('loadData')    
  }
})

언급URL : https://stackoverflow.com/questions/64125155/how-to-properly-chain-vuex-actions-and-correctly-mutate-the-state-between-calls