vue - vuex 刷新存儲狀態

項目使用vue-element-admin，存儲用戶名到store,頁面刷新則失效，需要在頁面刷新的時候判斷一下，然后存放到session中。具體看App.vue
項目還重寫了 刷新 功能。 reload，主要在每個需要的頁面引入即可

user.js

//store/modules/user.js
import { login, logout } from "@/api/user";
const state = {
  username: ""
};
const mutations = {
  SET_NAME: (state, username) => {
    state.username = username;
  },
};

const actions = {
  // user login
  login({ commit }, userInfo) {
    const { username, password, csrf_token } = userInfo;
    return new Promise((resolve, reject) => {
      login({
        username: username.trim(),
        password: password,
        csrf_token: csrf_token,
        submit: "login"
      })
        .then(response => {
          const { username } = response;
          //將用戶姓名放入session
          sessionStorage.setItem('username',username);
          commit("SET_NAME", username);
          resolve(response);
        })
        .catch(error => {
          reject(error);
        });
    });
  },

  // user logout
  logout({ commit }) {
    return new Promise((resolve, reject) => {
      logout()
        .then(() => {
          //將用戶姓名移出session
          sessionStorage.setItem('username','');
          resolve();
        })
        .catch(error => {
          reject(error);
        });
    });
  }
};

export default {
  namespaced: true,
  state,
  mutations,
  actions
};

getter.js

//store/getter.js
//
const getters = {
  username: state => state.user.username,
};
export default getters;

App.vue

<template>
    <div id="app">
        <router-view v-if="isRouterAlive" />
    </div>
</template>

<script>
export default {
    name: 'App',
    created() {
        //解決刷新存儲store中的名字失效
        //如果sessionStorage中存儲了store
        if (sessionStorage.getItem('username')) {
            // replaceState 替換state根狀態（參數為 對象）
            this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem('username'))));
        }
        //在頁面刷新時將vuex里的信息保存到sessionStorage里
        window.addEventListener('beforeunload', () => {
            sessionStorage.setItem('username', JSON.stringify(this.$store.state));
        });
    },
    provide() {
        //父組件中通過provide來提供變量，在子組件中通過inject來注入變量。
        return {
            reload: this.reload
        };
    },
    data() {
        return {
            isRouterAlive: true //控制視圖是否顯示的變量
        };
    },
    methods: {
        reload() {
            this.isRouterAlive = false; //先關閉，
            this.$nextTick(function() {
                this.isRouterAlive = true; //再打開
            });
        }
    }
};
</script>
<style lang="scss">
#app {
    background-color: #f2f2f2;
    .el-form-item .el-input {
        max-width: 800px;
    }
}
</style>

xxx.vue

export default {
inject: ['reload'],
}

//使用時
this.reload();