Vuex 및 앱 전에 Vue 라우터를 로드하고 있습니다.3

Vuex 및 앱 전에 Vue 라우터를 로드하고 있습니다.

vue 앱이 생성되면 스토어에서 백엔드 엔드포인트에 도달하는 작업을 디스패치하여 사용자 데이터를 가져오고 사용자 상태를 업데이트합니다.

사용자 데이터가 컴포넌트에 라우팅할 수 있는 적절한 권한을 가지고 있는지 확인하기 위해 네비게이션 가드(관련 루트 내 또는 컴포넌트 내부를 입력하기 전에 입력)를 사용하려고 합니다.단, store.state 또는 store.getters 중 하나에 액세스하려고 하면 스토어 내의 액션이 완료되기 전에 라우터가 로드되기 때문에 빈 데이터가 반환됩니다.

온라인에서 찾은 다른 해결책을 시도해 보았지만, 아직 운이 좋지 않았습니다.다음은 코드의 일부입니다.

export default {
  name: 'App',
  created() {
    this.setupAxios()
    this.fetchInitial()
  },
  methods: {
    setupAxios(){
      axios.defaults.headers.common['X-CSRFToken'] = window.csrfToken
    },
    fetchInitial(){
      this.$store.dispatch('FETCH_USER_PROFILE')
    },
  }
}

const actions = {
  ['FETCH_USER_PROFILE']: ({commit, dispatch}) => {
    return axios.get(reverseJS['api2:users-list']())
      .then(resp => {
        commit('FETCH_USER_PROFILE', resp.data)
        return resp.data
      })
      .catch(error => {
        commit('USERS_ERROR', error)
        throw error
      })
  },
}

언급URL : https://stackoverflow.com/questions/71313557/vue-router-being-loaded-before-vuex-and-the-app