Хранилище не работает должным образом в ответ Vuex Axios

Question

Всякий раз, когда я отправляю данные в хранилище vuex, используя ответ axios, например,

** 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 (this. $ Store.state.userStore.roles) это имеет значение, но когда я консоль в приборной панели, он возвращает ноль, и когда я вижу vuex chrome расширение, оно содержит значение (предоставленное изображение ниже), но в инструментальной панели возвращает ноль

eg in dashboard 

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

Теперь, когда я отправляю vuex вне ответа axios, он работает отлично и дает значение в панели мониторинга, но выдает ошибку, например, Error: [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)
  }
}

например, в панели инструментов, это дает значение, если я использую диспетчерскую работу вне axios

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

Я что-то упустил ???

Answer 1

Попробуйте это:

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)
      })
  }
}

Answer 2

Вы пытаетесь утешить store.state.userStore.roles до вызова API. Избегайте доступа к значению магазина в созданной ()