Kaustubh
10 months ago
11
0
Vue

Multiple State Value Not Working in VUEX

Posted 10 months ago by Kaustubh

Hi

This is my vuex (userStore.js) page

const state = {
    roles:null,
    authUser:null
}
const mutations  = {
    SET_AUTH_USER(state,userObj){
        state.authUser = userObj
    },
    SET_USER_ROLE(state,userRole){
        state.roles = userRole      
    }
}
const actions = {
    setUserObject :({commit},userObj) => {
        commit('SET_AUTH_USER',userObj)
    },
    setUserRoles :({commit},userRole) => {
        commit('SET_USER_ROLE',userRole)
    }
}
export default {
    state, mutations, actions
}

When i fetch data and dispatch to the sidebar page, and console store i get output like this sidebar.vue

console.log(this.$store.state.userStore)
// OUTPUT
// {__ob__: Observer}
// authUser: "NqStDm8ol3QGtoh0hzL7yhC3NP3HV0ktYKmYHI8TNiCjG4T4tLlv3pOEWFdA5CEh"
// roles: Array(3) 

console.log(this.$store.state.userStore.roles)
// (3) [{…}, {…}, {…}, __ob__: Observer]

console.log(this.$store.state.userStore.authUser)
// "NqStDm8ol3QGtoh0hzL7yhC3NP3HV0ktYKmYHI8TNiCjG4T4tLlv3pOEWFdA5CEh"

But Problem comes when i console it in dashboard or any other page i get output null in roles and value in authUser like given below

console.log(this.$store.state.userStore)
// OUTPUT
// {__ob__: Observer}
// authUser: "NqStDm8ol3QGtoh0hzL7yhC3NP3HV0ktYKmYHI8TNiCjG4T4tLlv3pOEWFdA5CEh"
// roles: Array(3)

console.log(this.$store.state.userStore.roles)
// null

console.log(this.$store.state.userStore.authUser)
// "NqStDm8ol3QGtoh0hzL7yhC3NP3HV0ktYKmYHI8TNiCjG4T4tLlv3pOEWFdA5CEh"

Please sign in or create an account to participate in this conversation.