结合vuex本地存储state全局变量值(避免页面刷新数据丢失)

结合vuex本地存储state全局变量值(避免页面刷新数据丢失)

问题描述：
通过接口获取的数据进行变量接收后，如果刷新页面，需要重新进行接口请求，这样有时候会造成需要渲染的数据丢失。解决方法如下：
1、store中定义全局变量：

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    /*定义组件间通信变量*/
    dayEvents:[],
    dayTaskShow:false,
    calendarOneDay:'',

    signPeopleName:'',//当前签到人姓名
    signSuccessManPic:'',//当前签到人成功照片
    signTime:'',//签到时间

    mapShow:true,//map地图展示
    bimShow:false,//BIM模型展示

    goHomeColor:false,
    goDeviceStatusColor:false,
    goWorkTaskColor:false,
    goOperationsSinInRecordColor:false,
    goSpecificationRequirementsColor:false,
  },
  mutations: {},
  actions: {},
  modules: {}
});

2、对全局变量进行watch监听：我这里需要监听的变量是signPeopleName和signSuccessManPic以及signTime，具体根据你的需求来就行。
注：watch与methods方法区同级

watch:{
            "$store.state.signPeopleName":function (val,old) {
                console.log(val)
            },
            "$store.state.signSuccessManPic":function (val,old) {
                console.log(val)
            },
            "$store.state.signTime":function (val,old) {
                console.log(val)
            },
        },

3、生命周期created里面进行本地sessionStorage变量值存储：

// 页面载入时本地存储中有 state 则用本地state赋值到 vuex 中的 state
            sessionStorage.getItem('state') && this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem('state'))));
            //进行页面刷新时存储 store.state 数据存储到sessionStorage中
            window.addEventListener('beforeunload', () => {
                sessionStorage.setItem('state',JSON.stringify(this.$store.state));
            })

4、main.js里面引入store

import store from './stores/index';

new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

5、这样在刷新页面的时候，接口请求到的数据就可以被存储起来，避免了数据丢失的问题。
美滋滋！！！