Kaustubh
10 months ago
22
0
Vue

Define multiple variable in VUEX Mutation

Posted 10 months ago by Kaustubh

store.js

import Vue from 'vue';
import Vuex from 'vuex';
import userStore from './user/userStore.js';
import VuexPersist  from "vuex-persistedstate";
Vue.use(Vuex)
const debug = process.env.NODE_ENV !== 'production'


const vuexLocalStorage = new VuexPersist({
  key: 'vuex', // The key to store the state on in the storage provider.
  storage: window.localStorage, // or window.sessionStorage or localForage
})

export default new Vuex.Store({
modules:{
    userStore,
    plugins: [vuexLocalStorage.plugin]
},

strict:debug
})

userStore.js

const state = {
    authUser:null,
    roles: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
}

Sidebar.vue

created(){
    this.getRoles();
},
methods: {
    getRoles(){
        var _this = this
        _this.roles_data = response.data
        _this.$store.dispatch('setUserRoles',_this.roles_data)
        _this.fetch_roles()
    }
    fetch_roles(){
        console.log(this.$store.state.userStore.roles)
        // OUTPUT
        // (3) [{…}, {…}, {…}, __ob__: Observer]

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

Dashboard.vue

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

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

hi I am working on vuex to store user roles access. I am storing two variable in store 1) authUser 2) roles. authUser store user token and roles store user roles array. When i fetch role from api, i dispatch roles to _this.$store.dispatch('setUserRoles',_this.roles_data). When i console in sidebar i get output like this

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

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

But when i console same thing in dashboard in created function it return roles null

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

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

Am i missing something ?? or its a bug

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