使用 VUEX 存储状态并解决刷新后VUEX中数据丢失问题

一、概述

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的全部组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

二、使用vuex管理登陆状态

一、导入vuex

import Vuex from 'vuex'
Vue.use(Vuex);
import store from './store'
复制代码

new Vue({
  el: '#app',
  // 启用路由
  router,
  //启用store
  store,
  // 启用 ElementUI
  render: h => h(App)
});
复制代码

二、建立store文件夹并建立index.js文件

index.js 文件内容以下

import Vue from 'vue'
import Vuex from 'vuex'
import user from './model/user'

Vue.use(Vuex);

export default new Vuex.Store({
//定义模块user
  modules: {
    user
  }
})

复制代码

三、建立user模块

user.js 以下

//定义一个常量user
const user = {
  //若是sessionStorage 中存在则使用sessionStorage 中数据  不然建立一个空 user   解决页面刷新丢失数据
  state: sessionStorage.getItem('loginUser') ? JSON.parse(sessionStorage.getItem('loginUser')) : {
    user: {
      username: ''
    }
  },
  //获取对象  this.$store.getters.getUser.userName
  getters: {
    getUser(state) {
      return state.user;
    }
  },
  //更新对象 this.$store.updateUser();
  mutations: {
    updateUser(state, user) {
      state.user = user;
    }
  },
  //异步更新对象   this.$store.dispatch("asyncUpdateUser",repos.data.data);
  actions: {
    asyncUpdateUser(context, user) {
      context.commit('updateUser', user);
    }
  }
};

export default user;

复制代码

四、修改app.vue 监听页面刷新将值暂存至sessionStorage 解决刷新后数据丢失

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

<script>
  export default {
    name: 'App',
    mounted(){
      //监听页面刷新事件
      window.addEventListener("unload",this.saveLoginUser);
    },
    methods:{
      saveLoginUser(){
        //将值VUEX中的state.user 存入sessionStorage
        sessionStorage.setItem('loginUser',JSON.stringify(this.$store.state.user));
      }
    }
  }
</script>
复制代码