Every time I send data to the Vuex storage using an axios response, for example:
** 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 the response
_this.$store.dispatch('setUserRoles', response.data.data)
}
}
check_role(){
}
}
And when I console log in sidebar like console.log(this.$store.state.userStore.roles), it has a value. However, when I console log in dashboard, it returns null. Even though when I check the Vuex chrome extension, it shows that it contains a value (see image below), but on the dashboard it returns null.
For example, in dashboard
** dashboard.vue **
created(){
console.log(this.$store.state.userStore.roles)
// null
},
https://i.sstatic.net/KFQKj.jpg
Now, when I dispatch to Vuex outside of the axios response, it works perfectly and gives a value in the dashboard, but throws an error like "Error: [vuex] Do not mutate Vuex store state outside mutation handlers." For example:
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)
}
}
For example, in the dashboard it gives a value if I use dispatch outside axios:
** dashboard.vue **
created(){
console.log(this.$store.state.userStore.roles)
// (25) [{…}, {…}, {…}, __ob__: Observer]
},
Am I overlooking something???