vuex中存储获取登录信息的基本用法

最新推荐文章于 2023-07-31 15:57:55 发布

ghx123456ghx

最新推荐文章于 2023-07-31 15:57:55 发布

阅读量238

点赞数

分类专栏： vuex 存储文章标签： vue.js

本文链接：https://blog.csdn.net/ghx123456ghx/article/details/120288781

版权

本文介绍了如何在Vuex中使用5大组件来处理登录信息的存储和获取。详细讲解了设置值的步骤，包括定义mutation、action以及getter，并通过模块化管理状态。在vue页面中调用login方法更新SET_SIDEBAR_ROUTERS，同时提供了多种方式从store中获取存储的用户信息，如nicName。

摘要由CSDN通过智能技术生成

vuex5大组件

action:定义状态对象
mutation：修改状态
action：类似于mutation，但提交的是mutation，而不是直接修改状态
getter:action的附属，获取方法，对象等
Module：模块，将store分割为多个模块

设置值

定义SET_SIDEBAR_ROUTERS，注意，在下面代码里找SET_SIDEBAR_ROUTERS

import {
    login, logout, getInfo } from '@/api/login'
import {
    getToken, setToken, removeToken } from '@/utils/auth'

const user = {
   
  state: {
   
    token: getToken(),
    name: '',
    avatar: '',
    roles: [],
    permissions: [],
    level:'',
    orgCode:'',
    districtCode:'',
    cityCode:'',
    nickName:''
  },

  mutations: {
   
    SET_TOKEN: (state, token) => {
   
      state.token = token
    },
    SET_NAME: (state, name) => {
   
      state.name = name
    },
    SET_AVATAR: (state, avatar) => {
   
      state.avatar = avatar
    },
    SET_ROLES: (state, roles) => {
   
      state.roles = roles
    },
    SET_PERMISSIONS: (state, permissions) => {
   
      state.permissions = permissions
    },
    SET_LEVEL: (state, level) => {
   
      state.level = level
    },
    SET_ORG_CODE: (state, orgCode) => {
   
      state

最低0.47元/天解锁文章