若依框架根据当前登录人信息，显示不同的静态公司logo

1、在\src\store\modules\user.js文件新增所需要获取的用户信息。

xml 复制代码

const user = {
    state: {
        token: getToken(),
        id: '',
        name: '',
        avatar: '',
        // 新增deptId变量
        deptId: '',
        roles: [],
        permissions: []
    },
// 通过mutations修改State（数据仓库）中存储的数据，唯一方式
mutations: {
        SET_TOKEN: (state, token) => {
            state.token = token
        },
        SET_ID: (state, id) => {
            state.id = id
        },
        SET_NAME: (state, name) => {
            state.name = name
        },
        SET_AVATAR: (state, avatar) => {
            state.avatar = avatar
        },
        // 新增设置用户部门编号，根据此编号显示静态logo
        SET_DEPTID: (state, deptId) => {
            state.deptId = deptId
        },
        SET_ROLES: (state, roles) => {
            state.roles = roles
        },
        SET_PERMISSIONS: (state, permissions) => {
            state.permissions = permissions
        }
    },

        // 获取用户信息
        GetInfo({ commit, state }) {
            return new Promise((resolve, reject) => {
                getInfo().then(res => {
                    console.log('后端完整返回数据：', res);
                    const user = res.user
                    const deptId = user.deptId
                    const avatar = (user.avatar == "" || user.avatar == null) ? require("@/assets/images/login.jpg") : process.env.VUE_APP_BASE_API + user.avatar;
                    if (res.roles && res.roles.length > 0) { // 验证返回的roles是否是一个非空数组
                        commit('SET_ROLES', res.roles)
                        commit('SET_PERMISSIONS', res.permissions)
                    } else {
                        commit('SET_ROLES', ['ROLE_DEFAULT'])
                    }
                    commit('SET_ID', user.userId)
                    commit('SET_NAME', user.userName)
                    commit('SET_AVATAR', avatar)
                    // 将通过GetInfo获取到的deptId，提交mutation更新state中的deptId
                    commit('SET_DEPTID', deptId)
                    resolve(res)
                }).catch(error => {
                    reject(error)
                })
            })
        },

2、在\src\layout\components\Sidebar\Login.vue中获取state中存储的deptId（this.$store.state.user.deptId）信息，并判断显示对应的静态logo

xml 复制代码

<transition name="sidebarLogoFade">
  <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
    <img v-if="logo" :src="logo" class="sidebar-logo" />
    <h1  v-if="isShowTitle" class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1>
  </router-link>
  <router-link v-else key="expand" class="sidebar-logo-link" to="/">
    <div :class="isShowTitle ? '' : 'image-wrapper'">
      <img v-if="logo" :src="logo" :class="isShowTitle ? 'sidebar-logo' : ''" />
      <h1 v-if="isShowTitle" class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">CHEMSUN </h1>
    </div>
  </router-link>
</transition>

// 导入用到的静态图片
import logoImg from '@/assets/logo/logo.png'
import vLogo from '@/assets/logo/vlogo.png'

computed: {
    // 获取当前的deptId，如果为111的话显示vexveLogo 否则logoImg
    logo() {
      const deptId = this.$store.state.user.deptId;
      return deptId === 111 ? vLogo : logoImg;
    }
    //  是否显示判断,deptId不等于111则为True
    isShowTitle() {
      const deptId = this.$store.state.user.deptId;
      return deptId !== 111;
    }
  },

注意state中要声明你所需要的变量名，如果不加的话就会导致响应性缺失，但是也不会有很大影响，功能也能正常实现。只不过在更改值的时候并不会立即生效，因为Vue 会在初始化时对state中的属性做「响应式监听」，当你通过 mutation 修改它们时，所有使用这些属性的组件会自动更新视图；

但是如果仅在mutations中动态添加的deptId：Vue 没有对这个属性做监听，哪怕你后续通过SET_DEPTID修改它的值，使用deptId的组件不会自动刷新（除非组件重新渲染，比如路由跳转）。