• List item

  • 产生原因
    其实很简单,因为store里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例,store里面的数据就会被重新赋值。

  • 解决思路
    一种是state里的数据全部是通过请求来触发action或mutation来改变
    一种是将state里的数据保存一份到本地存储(localStorage、sessionStorage、cookie)中
    很显然,第一种方案基本不可行,除非项目很小或者vuex存储的数据很少。而第二种可以保证刷新页面数据不丢失且易于读取。

  • 解决过程


import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);

//公共仓库
const publics = {
  state: {
    phone: '',    //用户手机号
    userName: '',    //用户昵称
    userLogo: '', //用户头像
    address: '',   //当前地址
  },
  mutations: {
    //地址更新
    updataAddress (state,cityCode) {
      state.address = cityCod
    },
  },
};

/**
@实现思路:全局监听,页面刷新的时候将store里state的值存到sessionStorage中,然后从sessionStorage中获取,再赋值给store。
然后再把session里面存的删除即可,相当于中间件的作用。
*/




//在页面加载时读取sessionStorage里的状态信息
if (sessionStorage.getItem("store")) {
  // console.log('刷新后')
  publics.state = JSON.parse(sessionStorage.getItem("store"))
  sessionStorage.removeItem("store")
}
//在页面刷新时将vuex里的信息保存到sessionStorage里
window.addEventListener("beforeunload", () => {
  // console.log('刷新前')
  sessionStorage.setItem("store",JSON.stringify(publics.state))
});



export default new Vuex.Store({
  modules: {
    publics,
  }
})

Logo

前往低代码交流专区

更多推荐