vue-element-admin 模板中解决页面刷新时vuex存储的数据消失问题

• 创建我们直接的store.js

const state = {
    user: {
        phone: ""
    },
    shopId: ""
}
export default {
    namespaced: true,
    state
}

• 在index.js中引用

...

import mystore from './modules/mystore'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
   	...,
   	
    mystore
  }
})

export default store

• 在App.vue中监听页面刷新

export default {
  name: "App",

  /**
 * 当页面刷新时vuex存储的数据会消失，因此一般使用sessionStorage处理
   */
  mounted() {
    window.addEventListener('unload',this.saveState);
  },
  methods: {
    saveState(){
      sessionStorage.setItem('state',JSON.stringify(this.$store.state))
    }
  },
};
</script>

• 修改mystore.js

const state = sessionStorage.getItem('state') ? JSON.parse(sessionStorage.getItem('state')).mystore : {
    user: {
        phone: ""
    },
    shopId: ""
}
export default {
    namespaced: true,
    state
}

• 使用

/**
     * 当页面刷新时vuex存储的数据会消失，因此一般使用sessionStorage处理
     */
    onSaveVuex() {
      this.$store.state.mystore.shopId="huangxiaoguo"
    },
    onReadVuex() {
      this.vuexStr=this.$store.state.mystore.shopId;
    }

实现效果