vuex axios 응답에서 스토리지가 제대로 작동하지 않음

vuex axios 응답에서 스토리지가 제대로 작동하지 않음

예를 들어 Axios 응답을 사용하여 vuex 스토리지에 데이터를 디스패치할 때마다

** Sidebar.vue **
  created(){
    this.getRoles();
  },
  methods: {
    getRoles(){
      var _this = this
      var roles = null
      this.$http.get('/api/userroles/userroles').then(function(response){
        // Passing data to vuex within response
        _this.$store.dispatch('setUserRoles', response.data.data)
      }
    }
    check_role(){

    }
  }

console.log와 같은 사이드바에 콘솔이 있는 경우.$store.state.userStore.roles) 값이 있지만 대시보드에서 콘솔이 null을 반환하고 vuex chrome 확장자가 나타나면 값(아래 제공된 이미지)을 포함하지만 대시보드에서는 null을 반환함

eg in dashboard 

** dashboard.vue **
created(){
  console.log(this.$store.state.userStore.roles)
  // null
},

Axios 응답 외부에 있는 vuex로 디스패치하면 정상적으로 동작하며 대시보드에 값을 표시하지만 에러: [vuex] 변환 핸들러 외부에 있는 vuex 스토어 상태를 변환하지 않습니다.예를 들어,

created(){
  this.getRoles();
},
methods: {
  getRoles(){
    var _this = this
    var roles = null
    this.$http.get('/api/userroles/userroles').then(function(response){
      _this.roles_data = response.data.data
    }
    _this.$store.dispatch('setUserRoles', _this.roles_data)
  }
}

예를 들어 대시보드에서 dispatch를 외부 악리어로 사용하는 경우 가치를 부여합니다.

** dashboard.vue **
created(){
  console.log(this.$store.state.userStore.roles)
  // (25) [{…}, {…}, {…}, __ob__: Observer]
},

내가 뭘 놓쳤나?

이것을 시험해 보세요.

created () {
  this.getRoles()
},

methods: {
  getRoles () {
    this.$http
      .get('/api/userroles/userroles')
      .then(({data: {data}}) => {
        this.$store.dispatch('setUserRoles', data)
      })
  }
}

또한 생성된 방법으로 역할을 콘솔화하려고 하지 마십시오.Axios가 비동기이기 때문에 동작할 수 없기 때문에 데이터가 도착하기 전에 콘솔 상태가 됩니다.Axios 콜백에서도 콘솔합니다.

created () {
  this.getRoles()
},

methods: {
  getRoles () {
    this.$http
      .get('/api/userroles/userroles')
      .then(({data: {data}}) => {
        this.$store.dispatch('setUserRoles', data)
        // here, not in created method
        console.log(this.$store.state.userStore.roles)
      })
  }
}

API 호출을 하기 전에 store.state.userStore.roles를 콘솔하려고 합니다.created()의 스토어 값에 액세스하지 않도록 합니다.

언급URL : https://stackoverflow.com/questions/53063117/storage-not-working-properly-in-vuex-axios-response