Storage not working properly in vuex axios response

Question

Whenever i dispatch data to vuex storage using axios response, for eg.

** 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(){

    }
  }

and When i console in sidebar like console.log(this.$store.state.userStore.roles) it have value, but when i console in dashboard it return null and when i see vuex chrome extension it contains value (provided image below), but in dashboard it return null

eg in dashboard 

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

Now when i dispatch to vuex outside the axios response it works perfectly and gives value in dashboard but its throw error like Error: [vuex] Do not mutate vuex store state outside mutation handlers. for eg.

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

eg in dashboard it give value if i use dispatch outside axios

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

Am i missing something???

Vladislav Ladicky Vladislav Ladicky · Accepted Answer · 2018-10-30T12:02:30

Try this:

created () {
  this.getRoles()
},

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

And do not try to console roles in created method. Because it can't work, axios is async, you will console state before data arrives. If, console it in axios callback too:

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

Storage not working properly in vuex axios response

2 Answers