vuex 獲取狀態信息 判斷

先在store.js 寫上這寫代碼

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex); 
const state = {   //要設置的全局訪問的state對象
    currentUser: sessionStorage.getItem('user') ? sessionStorage.getItem('user') : '',  
    //要設置的初始屬性值
};
const getters = {   //實時監聽state值的變化(最新狀態)
    getcurrentUser(state) {  //獲取當前登錄的用戶
        return state.currentUser
    },  
};
const mutations = { 
    setcurrentUser(state, user) {  //同上  
        state.currentUser = user; 
    },
};
const actions = {
    setUser(context, user) {  //自定義觸發mutations裏函數的方法，context與store 實例具有相同方法和屬性  
        context.commit('setcurrentUser',user);
    }, 
};
const store = new Vuex.Store({
    state,
    getters,
    mutations,
    actions,
}); 
export default store;

在登陸的頁面 調用登陸的接口成功後 寫

this.$store.dispatch('setUser',this.username) ;
sessionStorage.setItem('user', this.$store.getters.getcurrentUser);  

在app.vue 寫

mounted(){
	window.addEventListener('beforeunload', this.saveCurrentUser());
},
methods:{
	saveCurrentUser(){
      	sessionStorage.setItem('user', this.$store.state.currentUser);  
    },
}

測試存成功沒

alert(this.$store.state.currentUser);

在註銷的接口調用成功後寫 這裏寫是爲了清除 sessionStorage的緩存信息

sessionStorage.setItem("user", "");