如何解决Vuex页面刷新数据丢失 ？

Vuex 是一个 Vue.js 的状态管理模式，用于集中存储和管理应用的所有组件的状态。然而，Vuex 的状态只存在于当前浏览器的内存中，当页面刷新或关闭并重新打开后，Vuex 中的状态会丢失。为了解决这个问题，我们可以将 Vuex 的状态保存到浏览器的 localStorage 或者 sessionStorage 中，当页面刷新或重新打开后，再从这些存储中恢复状态。

以下是一个简单的例子，演示了如何在 Vuex store 中使用 localStorage 来保存和恢复状态：

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    // 假设我们有一个名为 user 的状态
    user: null
  },
  mutations: {
    SET_USER(state, user) {
      state.user = user
      // 当 user 状态改变时，我们将其保存到 localStorage
      localStorage.setItem('user', JSON.stringify(user))
    }
  },
  actions: {
    setUser({ commit }, user) {
      commit('SET_USER', user)
    }
  },
  created() {
    // 当 store 创建时，我们尝试从 localStorage 中恢复 user 状态
    const savedUser = localStorage.getItem('user')
    if (savedUser) {
      this.commit('SET_USER', JSON.parse(savedUser))
    }
  }
})

在这个例子中，每当 user 状态改变时，我们都会将其保存到 localStorage 中。同时，当 store 创建时，我们会尝试从 localStorage 中恢复 user 状态。这样，即使页面刷新或重新打开，user 状态也不会丢失。

注意，使用 localStorage 或 sessionStorage 来保存 Vuex 的状态可能会有一些限制，比如存储空间的限制（一般来说，localStorage 的存储空间限制为 5MB，而 sessionStorage 的限制可能会更小），以及数据的安全性和隐私问题。因此，在选择使用这种方法时，需要权衡其优缺点。