Vuex 页面刷新数据丢失怎么解决？

在使用 Vue.js 开发应用时，我们通常会借助 Vuex 来管理全局状态。使用 Vuex 的好处是让我们的组件之间可以共享数据，并且通过一些规则来保证数据的正确性。

然而，在某些情况下，当页面进行刷新后，我们会发现 Vuex 中存储的数据全部丢失了。这是因为 Vuex 的数据是存在内存中的，当浏览器刷新页面时，内存中的数据也会被清空。如何解决这个问题呢？

方案一：利用 localStorage

localStorage 是一种浏览器提供的本地存储方案，可以将数据永久存储在用户的浏览器中。我们可以将 Vuex 中的数据存储到 localStorage 中，在页面刷新后再从 localStorage 中读取数据，从而实现数据的持久化。

javascript复制代码
// store.js

const state = {
  todoList: []
}

const mutations = {
  addTodoItem(state, item) {
    state.todoList.push(item)
    localStorage.setItem('todoList', JSON.stringify(state.todoList))
  },
  initStore(state) {
    const todoList = localStorage.getItem('todoList')
    if (todoList) {
      state.todoList = JSON.parse(todoList)
    }
  }
}

export default new Vuex.Store({
  state,
  mutations
})

我们在 mutations 中，每次添加新的 todoItem 时都将整个 todoList 存储到 localStorage 中。同时，我们在初始化 store 时，从 localStorage 中读取数据并更新到 store 中。

javascript复制代码
// main.js

import Vue from 'vue'
import App from './App.vue'
import store from './store'

Vue.config.productionTip = false

new Vue({
  store,
  created() {
    this.$store.commit('initStore')
  },
  render: h => h(App),
}).$mount('#app')

在 Vue 实例创建之后，我们调用 initStore 方法来初始化 store 数据。

方案二：利用 sessionStorage

sessionStorage 和 localStorage 类似，不同之处在于 sessionStorage 存储的数据只存在于当前会话中。当用户关闭浏览器窗口后，sessionStorage 中的数据也会被清空。因此，如果你的应用要求用户每次打开页面时重新登录，那么可以使用 sessionStorage 来存储 Vuex 数据。

javascript复制代码
// store.js

const state = {
  todoList: []
}

const mutations = {
  addTodoItem(state, item) {
    state.todoList.push(item)
    sessionStorage.setItem('todoList', JSON.stringify(state.todoList))
  },
  initStore(state) {
    const todoList = sessionStorage.getItem('todoList')
    if (todoList) {
      state.todoList = JSON.parse(todoList)
    }
  }
}

export default new Vuex.Store({
  state,
  mutations
})

和方案一类似，我们在 mutations 中将数据存储到 sessionStorage 中，并且在初始化 store 时从中读取数据。

总结

在使用 Vuex 中，为了避免刷新页面后数据丢失的问题，我们可以将数据存储到 localStorage 或者 sessionStorage 中。这些浏览器提供的存储方案可以让我们实现数据的持久化，并且在需要时从中读取数据。然而，这些方法也存在一定的安全风险，因此需要谨慎使用。