RuoyiApp 在vuex,state存储nickname vue2

发现一个很头疼问题,RuoyiApp(uniapp)小程序在文件中随时获取nickname获取不到,因为在登录的时候没有存储(或许官方有解决方案) 接下来使用vuex开始破局 添加的文件前面都有一行++++++

1.user.js

js 复制代码
import config from '@/config'
import storage from '@/utils/storage'
import constant from '@/utils/constant'
import { isHttp, isEmpty } from "@/utils/validate"
import { login, logout, getInfo } from '@/api/login'
import { getToken, setToken, removeToken } from '@/utils/auth'
import defAva from '@/static/images/profile.jpg'

const baseUrl = config.baseUrl

const user = {
  state: {
    token: getToken(),
    id: storage.get(constant.id),
    name: storage.get(constant.name),
	++++++	nickName: storage.get(constant.nickName),
    avatar: storage.get(constant.avatar),
    roles: storage.get(constant.roles),
    permissions: storage.get(constant.permissions)
//	permissions: [].concat(storage.get(constant.permissions) || [])
  },

  mutations: {
    SET_TOKEN: (state, token) => {
      state.token = token
    },
    SET_ID: (state, id) => {
      state.id = id
      storage.set(constant.id, id)
    },
    SET_NAME: (state, name) => {
      state.name = name
      storage.set(constant.name, name)
    },
    SET_AVATAR: (state, avatar) => {
      state.avatar = avatar
      storage.set(constant.avatar, avatar)
    },
    SET_ROLES: (state, roles) => {
      state.roles = roles
      storage.set(constant.roles, roles)
    },
    SET_PERMISSIONS: (state, permissions) => {
      state.permissions = permissions
      storage.set(constant.permissions, permissions)
    }++++++,
++++++SET_NICKNAME:(state,nickName) => {
++++++state.nickName = nickName
++++++storage.set(constant.nickName,nickName)
++++++}
  },

  actions: {
    // 登录
    Login({ commit }, userInfo) {
      const username = userInfo.username.trim()
      const password = userInfo.password
      const code = userInfo.code
      const uuid = userInfo.uuid
      return new Promise((resolve, reject) => {
        login(username, password, code, uuid).then(res => {
          setToken(res.token)
          commit('SET_TOKEN', res.token)
          resolve()
        }).catch(error => {
          reject(error)
        })
      })
    },

    // 获取用户信息
    GetInfo({ commit, state }) {
      return new Promise((resolve, reject) => {
        getInfo().then(res => {
          const user = res.user
		  console.log("user",user)
			console.log("JSON_user",JSON.stringify(user))
		  let avatar = user.avatar || ""
		  if (!isHttp(avatar)) {
            avatar = (isEmpty(avatar)) ? defAva : baseUrl + avatar
          }
       	  const userid = (isEmpty(user) || isEmpty(user.userId)) ? "" : user.userId
		  const username = (isEmpty(user) || isEmpty(user.userName)) ? "" : user.userName
++++++const nickName = (isEmpty(user) || isEmpty(user.nickName)) ? "" : user.nickName
		  console.log("nickName",nickName)
		  if (res.roles && res.roles.length > 0) {
            commit('SET_ROLES', res.roles)
            commit('SET_PERMISSIONS', res.permissions)
          } else {
            commit('SET_ROLES', ['ROLE_DEFAULT'])
          }
          commit('SET_ID', userid)
          commit('SET_NAME', username)
          commit('SET_AVATAR', avatar)
++++++commit('SET_NICKNAME', nickName)
          resolve(res)
        }).catch(error => {
          reject(error)
        })
      })
    },
    // 退出系统
    LogOut({ commit, state }) {
      return new Promise((resolve, reject) => {
        logout(state.token).then(() => {
          commit('SET_TOKEN', '')
          commit('SET_ROLES', [])
          commit('SET_PERMISSIONS', [])
          removeToken()
          storage.clean()
          resolve()
        }).catch(error => {
          reject(error)
        })
      })
    }
  }
}
export default user

2.constant.js

js 复制代码
const constant = {
  avatar: 'user_avatar',
  id: 'user_id',
  name: 'user_name',
++++++nickName: 'nick_name',
  roles: 'user_roles',
  permissions: 'user_permissions'
 }
 export default constant

3.getter.js

js 复制代码
const getters = {
  token: state => state.user.token,
  avatar: state => state.user.avatar,
  id: state => state.user.id,
  name: state => state.user.name,
++++++nickName: state => state.user.nickName,
  roles: state => state.user.roles,
  permissions: state => state.user.permissions
}
export default getters

4.storage.js

js 复制代码
import constant from './constant'

// 存储变量名
let storageKey = 'storage_data'

// 存储节点变量名
++++++let storageNodeKeys = [constant.avatar, constant.id, constant.name, constant.roles, constant.permissions,constant.nickName]

const storage = {
  set: function(key, value) {
    if (storageNodeKeys.indexOf(key) != -1) {
      let tmp = uni.getStorageSync(storageKey)
      tmp = tmp ? tmp : {}
      tmp[key] = value
      uni.setStorageSync(storageKey, tmp)
    }
  },
  get: function(key) {
    let storageData = uni.getStorageSync(storageKey) || {}
    return storageData[key] || ""
  },
  remove: function(key) {
    let storageData = uni.getStorageSync(storageKey) || {}
    delete storageData[key]
    uni.setStorageSync(storageKey, storageData)
  },
  clean: function() {
    uni.removeStorageSync(storageKey)
  }
}

export default storage

5.使用

js 复制代码
<script>
	import storage from '@/utils/storage'
	import constant from '@/utils/constant'
	export default {
		data() {
			return {
				baseFormData:{
					name: storage.get(constant.nickName),
					id: storage.get(constant.name),
				}
			}
		},
		methods: {
			
		}
	}
</script>

或者

js 复制代码
this.$store.state.user.nickName
相关推荐
紫禁玄科1 小时前
Shai-Hulud:npm生态的自我复制蠕虫风暴
前端·npm·node.js
东风破_1 小时前
后端API没写好,前端难道干等着吗?
前端
用户938515635072 小时前
从前后端分离到前端接口工程:React + MockJS + Vite 解析
前端·后端·全栈
用户938515635072 小时前
从零在浏览器里跑 DeepSeek-R1:WebGPU + Transformers.js 全链路实战(三)
前端·react.js·typescript
excel2 小时前
当前端行情变差,我们为什么还要坚持?
前端
鸿是江边鸟,曾是心上人2 小时前
快速搭建HTTPS本地开发环境
前端
java1234_小锋3 小时前
【免费】基于Python的微信小程序网约车(打车,在线叫车,移动出行)系统(FastAPI+Vue3) 锋哥原创出品,必属精品
微信小程序·小程序·fastapi·网约车系统·在线叫车系统
To_OC3 小时前
写了 5 个表单 Demo 后,我终于彻底搞懂了 React 受控与非受控组件
前端·react.js·前端框架
Sterting3 小时前
第9课 Vue Router 路由
前端·vue.js
用户059540174464 小时前
LangChain Memory 测试踩坑实录:用 pytest 自动化回归对话记忆,我折腾了整整一个周末
前端·css