ruoyi前后端分离3.8.6版本，把用户昵称设置到Vuex中，使任何组件都能直接获取用户的昵称

 1. 我自己所有步骤简易版：

首先打开src\store\modules\user.js ， 

    1. const user = {
          state: {
            ...
            niceName: '',  //第一步就是添加这个niceName（用户昵称）
            ...
        },

    2. mutations: {
        SET_NICKNAME: (state, nickName) => {  //第二步就是添加设置用户昵称方法
          state.nickName = nickName
        },
        ...
    }

3. // 获取用户信息
    GetInfo({ commit, state }) {
      return new Promise((resolve, reject) => {
        getInfo().then(res => {
            ...
             commit('SET_NICKNAME', user.nickName) // 第三步就是在这设置用户昵称

             }).catch(error => {
          reject(error)
        })
      })
    },

以上3个步骤页面就可以在任何页面获取到用户昵称了 ，调用方式：  let userName =  this.$store.state.user.nickName  ，

一般我会在.vue文件中这样定义，这样就页面就可以随意调用nickName
export default {
    ...
      data() {
        return {
          nickName : this.$store.state.user.nickName, 
          ...
        }
     }
}

2. 文心一言根据我自己的简易步骤帮我生成的带详细说明的文档：

 

在Vue.js项目中，使用Vuex管理状态，我们可以将用户的信息存储在Vuex中，这样在任何组件中都可以方便地获取到用户的信息。下面是在`src\store\modules\user.js`中添加用户昵称的步骤：

1. 在`state`中定义`niceName`变量：

const user = {
  state: {
    // 其他状态...
    niceName: '', // 添加用户昵称
    // 其他状态...
  },
  // 其他代码...
}

2. 在`mutations`中添加设置用户昵称的方法：

mutations: {
  SET_NICKNAME: (state, nickName) => {
    state.niceName = nickName // 将传入的昵称设置给state中的niceName
  },
  // 其他方法...
}

3. 在`actions`中获取用户信息，并在其中调用`SET_NICKNAME`方法设置用户昵称：

actions: {
  GetInfo({ commit, state }) {
    return new Promise((resolve, reject) => {
      getInfo().then(res => {
        // 其他处理...
        commit('SET_NICKNAME', res.nickName) // 设置用户昵称
        // 其他处理...
      }).catch(error => {
        reject(error)
      })
    })
  },
  // 其他方法...
}

4. 在上述代码中，我们首先从后端获取用户信息，然后使用`commit`方法触发`SET_NICKNAME`mutation，将返回的昵称设置给state中的`niceName`。

这样，我们就在Vuex中存储了用户的昵称，可以在任何组件中使用`this.$store.state.user.niceName`获取。在`.vue`文件中，我们可以这样定义：

这样，在页面上就可以显示用户的昵称了。