Vuex中基于用户角色动态控制菜单显示的实现求助

这个错误Error: [vuex] do not mutate vuex store state outside mutation handlers是因为你直接在组件里修改了Vuex store中的原始state数据——也就是在decodeToken方法里循环修改menuItems的isShow字段时，相当于直接改动了Vuex的核心状态，这违反了Vuex的核心规则：所有state的修改必须通过mutation函数完成。

下面是一步步的修正方案，帮你正确实现根据用户角色动态控制菜单显示的需求：

1. 完善Vuex Store的Mutation逻辑 #

我们需要添加专门的mutation来处理两种场景：单个菜单项的显示切换，以及根据用户角色批量设置所有菜单项的显示状态。修改你的store代码如下：

export const state = () => ({ 
  default: [ 
    { id: 1, label: "menuitems.admin.frp", link: "/dictionary/fprUser", icon: "ri-profile-line", isShow: false, role: ["admin"] }, 
    { id: 2, label: "menuitems.navigation.text", isTitle: true, isShow: false, role: ["admin", "engineer"] }, 
    // ...其他菜单项
  ] 
});

export const getters = { 
  getMenu(state) { 
    return state.default; 
  } 
};

export const mutations = {
  // 单个设置菜单项的isShow状态
  SET_IS_SHOW(state, { elementId, bool }) {
    const targetItem = state.default.find(item => item.id === elementId);
    if (targetItem) {
      targetItem.isShow = bool;
    }
  },
  // 根据用户角色批量设置所有菜单项的显示状态
  SET_MENU_SHOW_BY_ROLE(state, userRoles) {
    // 先重置所有菜单项为隐藏
    state.default.forEach(item => {
      item.isShow = false;
      
      // 判断用户角色是否匹配菜单项的权限角色
      const hasPermission = Array.isArray(userRoles) 
        ? userRoles.some(role => item.role.includes(role))
        : item.role.includes(userRoles);
        
      if (hasPermission) {
        item.isShow = true;
      }
    });
  }
};

export const actions = {
  // 单个设置菜单项的action
  storeSetMenuIsShow({ commit }, payload) {
    commit("SET_IS_SHOW", payload);
  },
  // 根据角色批量设置菜单的action
  setMenuShowByRole({ commit }, userRoles) {
    commit("SET_MENU_SHOW_BY_ROLE", userRoles);
  }
};

2. 修改组件逻辑，通过Vuex Action触发状态修改 #

在SideBar.vue里，我们不再直接修改menuItems，而是通过调用Vuex的action来让mutation处理state的修改。同时用computed属性获取菜单数据，确保响应式更新：

<template>
  <!-- 你的侧边栏模板 -->
</template>

<script>
export default {
  data() {
    return {
      user: { role: null }
    };
  },
  computed: {
    // 通过getters获取菜单数据，而不是直接取state
    menuItems() {
      return this.$store.getters["menu/getMenu"];
    }
  },
  methods: {
    decodeToken(token) {
      const decoded = this.$jwt.decode(token);
      let userRoles = decoded["http://schemas.microsoft.com/ws/2008/06/identity/claims/role"];
      
      if (!userRoles) return;
      
      // 统一把角色转为数组格式，简化后续处理
      if (typeof userRoles === "string") {
        userRoles = [userRoles];
      }
      
      // 调用Vuex action，让mutation处理菜单状态修改
      this.$store.dispatch("menu/setMenuShowByRole", userRoles);
      this.user.role = userRoles;
    }
    // ...其他方法
  }
};
</script>

3. 为什么这样能解决问题？ #

Vuex通过mutation来统一管理state的修改，这样可以追踪所有状态变化，方便调试和维护。之前的错误就是因为绕过了mutation直接修改state，现在所有的菜单状态修改都通过mutation完成，完全符合Vuex的规则。

另外，我们把角色处理逻辑统一放到了mutation里，也让组件代码更简洁，权限控制的逻辑也更集中，后续维护起来更方便。

内容的提问来源于stack exchange，提问作者Ярослав Прохоров