使用 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>
複製代碼