Here is my problem. After the user is logged in, I throw the role information into the getter. But I can't get this info from my vue page. These are my codes. I was aiming to see the role information I defined in the getter part of the module file.

module.js `

const state={
    user: "",
    Auth: false,
    role: "",
    token: localStorage.getItem("userToken")
}
const getters={
  user: state =>  state.user,  
  User: state => state.user,
  role: state => state.role
}

const mutations={
  userAdded: (state, userToken) => {
      state.token = userToken;
    },
    loggedIN: (state, userToken) => {
      state.token = userToken;
    },
    setUser: (state, user) => {
      (state.Auth = true), (state.user = user);
    },
    role: (state, role) => state.role = role,
}

const actions={
    authorize(vuexContext, token) {
        vuexContext.commit('setUser', jwt_decode(token).obj)
        localStorage.userId = jwt_decode(token).obj.id
        //localStorage.userToken = token
        localStorage.token = token
        return true;
    },
    async LoginUser({ dispatch, commit }, user) {
        try {
          const response = await axios.post(
            `${API}/app/login`,
            user,
            {
              headers: CTYPE
            }
          );
          console.log(response.data.token);
          localStorage.userToken = response.data.token
          localStorage.setItem("userToken", localStorage.userToken);
          commit("loggedIN", localStorage.userToken);
          await dispatch("loadUser");
        } catch (error) {
            console.log(error);
        }
      },
      async loadUser(vuexContext) {
        if (localStorage.userToken) {
          setAuthToken(localStorage.userToken);
        }
        try {
          const res = await axios.get(`${API}/app/login`);
          vuexContext.commit("setUser", res.data);
          vuexContext.commit("role", res.data.role);
          localStorage.userId = res.data._id
          localStorage.userName = res.data.name
          console.log(vuexContext.getters.role);
          console.log(res.data);
          router.push({ name: "home"}).catch(() => {});
        } catch (error) {
          //vm.$router.push({ path: "/login" });
          router.go(-1);
          console.log(error.data);
        }
      }
}


export default{
    namespaced: true, state, getters, mutations, actions
}

`

mypage.vue `

<script>
    import { computed } from 'vue'
    import { useStore, mapActions, mapGetters } from 'vuex'

    export default {
        
        setup(){                   
            const userid  = localStorage.userId
            const userName  = localStorage.userName

           const store = useStore()
            const role= computed(() => store.getters["Module/role"])
            console.log(role);

            return{
              role
            }            
        }

    };
</script>

<template>
      <div>{{role}}</div>
</template>



<style lang="scss" scoped>

</style>

` store/index.js

import { createStore} from 'vuex'
import Module from './module/Module'
import Module1 from './module/Module1'
import Module2 from './module/Module2'
import Module3 from './module/Module3'


export default createStore({
  namespace: true,
  state: {
    namespaces: true,
    alertData: {
      show: false,
      text: '',
      alertClass: ''
    },
  },
  getters: {
    alertData: state => state.alertData,
  },
  mutations: {
    showAlert(state, alertInfo){
      state.alertData = {
        show: true,
        text: alertInfo.text,
        alertClass: alertInfo.alertClass
      }
    },
  },
  actions: {
    
  },
  modules: {
    namespace: true,
    Module,
    Module1,
    Module2,
    Module3
  }
})

I was aiming to see the role information I defined in the getter part of the module file.

CodePudding user response：

You're not specify namespace of module it's defined, try to use mapGetters like this:

// mypage.vue 
const { role } = mapGetters('Module', ['role'])
const role = computed(() => role())

CodePudding user response：

This is solved my problem. It might help someone.

store.dispatch('Module/loadUser')
const user = computed(() => store.getters["Module/user"])
console.log(user.role)