Vuex和sessionStorage结合使用，存储数据实现用户登录以及如何使用数据

一、配置vuex

        将actions、mutation、getters独立成文件方便管理，在index.js引入，再一起暴露

               index.js

import Vue from 'vue'
import Vuex from 'vuex'
import actions from './actions'
import mutations from "./mutations";
import getters from "./getters";
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    //是否登录
    isLogin:window.sessionStorage.getItem("isLogin")?Boolean(window.sessionStorage.getItem("isLogin")): false,
    //登录用户信息
    userInfo:(window.sessionStorage.getItem("userInfo"))? JSON.parse(window.sessionStorage.getItem("userInfo")):[],
    //菜单信息
    menuInfo:(window.sessionStorage.getItem("menuInfo"))? JSON.parse(window.sessionStorage.getItem("menuInfo")):[],
    //用户登录成功后持有的token
    token:'',
    //是否刷新页面
    isRefresh:true,
  },
  actions:actions.actions,
  mutations:mutations.mutations,
  getters:getters.getters,

})

                actions.js

export default {
    actions:{
        //向mutation提交登陆成功
        LoginSuccess({commit},data){
            commit('LoginSuccess',data)
        },
        //存储token
        SaveToken({commit},token){
            commit('SaveToken',token)
        },
        //退出登录
        LoginExit({commit}){
            commit('LoginExit')
        },
        setNoRefresh({commit}){
            commit('setNoRefresh')
        },

    }
}

                mutations.js

export default {
    mutations:{
        //登陆成功
        LoginSuccess(state,data){
            state.isLogin=true
            state.isRefresh=true
            window.sessionStorage.setItem("isLogin",true)
            state.userInfo=data.user
            state.menuInfo=data.menuInfo
            console.log(data)
            sessionStorage.setItem('userInfo',JSON.stringify(data.user))
            sessionStorage.setItem('menuInfo',JSON.stringify(data.menuInfo))
        },
        //存储token
        SaveToken(state,token){
            state.token=token
        },
        //退出登录
        LoginExit(state){
            state.isLogin=false;
            state.userInfo = [];
            window.sessionStorage.setItem("isLogin",false);
            window.sessionStorage.removeItem("userInfo");
            window.sessionStorage.removeItem("menuInfo");
        },
        setNoRefresh(state){
            state.isRefresh = false; //设置不刷新
        },

    }
}

        getters.js

export default {
    getters:{
        //用户信息
        userInfo(state){
            return state.userInfo
        },
        //是否刷新
        IsRefresh(state){
            return  state.isRefresh
        },
        //是否登录
        IsLogin(state){
            return state.isLogin
        },
        //菜单树状列表
        menuTree(state){
            return state.menuInfo
        }
    }

}

二、登录操作

登录成功后，将后台返回的用户相关数据以及菜单数据存储

this.$axios.post(this.$api.user.login, this.$qs.stringify(this.user)).then(res=>{
    let result=res.data
    if(result.code==200){
       let data={
                  user:result.user,
                  menuInfo:result.menuInfo
                }
       //用vuex存储用户信息,token信息,menu信息
       this.$store.dispatch('LoginSuccess',data)
       this.$store.dispatch('SaveToken',result.user.token)
       //用session存储token                                        
       sessionStorage.setItem('setToken',JSON.stringify(result.user.token))
       //动态添加路由 
       DynamicRouter.DynamicAddRouter()
       this.$router.push('/home/index')
     }else {
            this.$message({
                            message: result.message,
                            type: 'warning'
                            });
            }
 }).catch(err=>{
               console.log(err)
               this.$message.error('请求出错，请联系管理员');
         })

三、数据使用

在需要使用数据的组件引入getters，当成computed属性使用

如在导航需要显示用户姓名以及头像

         引入：

        使用：