vue - 页面刷新重写,store存储值失效，采用session

项目使用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();

vue - 页面刷新重写,store存储值失效，采用session

猜你喜欢