Vuex无法从Getter获取角色信息问题求助

核心问题分析 #

1. 根Store配置错误：store/index.js中错误地在根Store和modules选项里添加了namespace: true，这是Vuex模块专属配置，根Store不需要，且会导致命名空间识别异常。
2. Computed Ref日志输出问题：页面中直接console.log(role)输出的是Vue的Computed Ref对象，而非实际值，需要访问value属性查看真实数据。

修复步骤 #

1. 修正store/index.js配置 #

删除根Store和modules里的无效namespace配置，正确配置如下：

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({
  state: {
    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: {
    Module,
    Module1,
    Module2,
    Module3
  }
})

2. 修正页面日志输出（便于调试） #

在mypage.vue的setup中，日志输出改为访问Computed Ref的value属性：

const role= computed(() => store.getters["Module/role"])
// 修正日志输出，查看实际值
console.log(role.value);

3. 规范模块mutation命名（可选但避免混淆） #

模块中role mutation与state属性重名，建议改为setRole，同步更新loadUser中的commit语句：

// module.js中的mutations
setRole: (state, role) => state.role = role,

// loadUser中的commit语句
vuexContext.commit("setRole", res.data.role);

验证 #

完成修改后重新登录进入mypage.vue，页面应正常渲染角色信息，控制台可打印出正确的角色值。

内容的提问来源于stack exchange，提问作者Atakan Yıldırım