vue登录状态管理,vuex+sessionStorage

在使用vuex保存登录状态时，发现刷新页面就需要重新登录，因此将vuex与sessionStorage绑定在一起，这样刷新页面就不会掉了

文件结构

index.js

import Vue from 'vue';
import Vuex from 'vuex';
import * as actions from './actions'
import * as getters from './getters';
import mutations from './mutations';
import state from './state';

Vue.use(Vuex);

const store = new Vuex.Store({
    state,
    getters,
    actions,
    mutations
});
export default store;

state.js

state中定义参数，并与sessionStorage绑定

import {
  loadUser,
  loadLocation
} from '../config/cache'

const state = {
  userInfo: loadUser(),
  location: loadLocation()
}

export default state

getters.js

来实时监听state值的变化(最新状态)

export const userInfo = state => state.userInfo

mutation-types.js

export const SET_USER_INFO = 'SET_USER_INFO' // 登录信息
export const REMOVE_USER = 'REMOVE_USER' // 登录信息

mutations.js

方法

import * as types from './mutation-types'

const mutations = {
  [types.SET_USER_INFO](state, obj) {
    state.userInfo = obj
  },
  [types.REMOVE_USER](state, obj) {
    state.userInfo = {}
  }
}

export default mutations

actions.js

异步触发mutations里面的方法

import * as types from './mutation-types'
import {
  saveUser,
  removeUser
} from '../config/cache'

export const setUser = function ({commit}, obj) {
  commit(types.SET_USER_INFO, saveUser(obj))
}
export const signOut = function({commit}) {
  commit(types.REMOVE_USER, removeUser())
}

cache.js

这个是封装的方法，将数据存放在sessionStorage中

import {
  setStore,
  getStore,
  removeStore
} from './util'

// 登录信息
const USER_INFO = '__userinfo__'

export function saveUser(obj) {
  let userinfo = obj
  setStore(USER_INFO, obj)
  return userinfo
}

export function loadUser(obj) {
  return getStore(USER_INFO)
}

export function removeUser(obj) {
  return removeStore(USER_INFO)
}

之后在页面中，引入mapGetters、mapActions

登录

退出登录