Vuex/Pinia实现数据持久化存储另一种解决方案：vuex页面刷新数据丢失问题

方案一

配合本地storage或cookies，在更新数据时同时将数据保存在本地，state在初始化时先从本地缓存读怪初始值。如登录时保存token：

export default new Vuex.Store({
  state: {
    token: window.sessionStorage.getItem('token') //初始或页面刷新后从本地读取
  },
  mutations: {
    saveToken(state, data) {
      state.token = data
      window.sessionStorage.setItem('token', data) // 同时保存在sessionStorage 
    }
  }
})

方案二

对于vuex可使用第三方插件，如vuex-persistedstate实现

方案三

方案一不足之处，当需再存一个用户登录信息时，如userInfo,则需在state里添加userInfo，相当于复制一个state里的token和mutations里的saveToken()，即

export default new Vuex.Store({
  state: {
    token: window.sessionStorage.getItem('token'), //初始或页面刷新后从本地读取
    userInfo: window.sessionStorage.getItem('userInfo')
  },
  mutations: {
    saveToken(state, data) {
      state.token = data
      window.sessionStorage.setItem('token', data) // 同时保存在sessionStorage 
    },
    saveUserInfo(state, data) {
      state.userInfo = data
      window.sessionStorage.setItem('userInfo', data)
    }
  }
})

当需要存储更多数据，可在浏览器刷新前将整个state保留起来，刷新完页面加载完成后再将本地值设回给state。可以App.vue中添加如下代码：

export default {
  created() {
    this.getStore()
  },
  methods: {
    beforeunload() {
//当浏览器刷新或关闭时将state存到本地，可根据实际需求使用sessionStorage或localStorae或者是cookies
      window.sessionStorage.setItem('store', JSON.stringify(this.$store.state))
    },
    getStore() {
//初始进来时如果存在store，则设置state的值
      const store = window.sessionStorage.getItem('store')
      if (store) {
        this.$store.replaceState(
            Object.assign(
                this.$store.state,
                JSON.parse(store)
            )
        )
      }
      //读取后这里可以将store从本地存储中删除
      window.sessionStorage.remove('store')
    }
  },
  mounted() {
    //当浏览器刷新或关闭时触发
    window.addEventListener("beforeunload", this.beforeunload)
  },
  beforeDestroy() {
    window.removeEventListener("beforeunload", this.beforeunload)
  }
}

如使用的是Vue3或者是Pinia存储时，都可以使用同样的原理进行存储，只是写法上有差异