vuex存取数据 刷新页面数据不丢失问题

在 Vue.js 中使用 Vuex 管理数据时，当页面刷新时，Vuex 中的数据会丢失。这是因为 Vuex 存储在内存中，而刷新页面会清空内存。

为了解决这个问题，可以使用浏览器的本地存储（LocalStorage 或 SessionStorage）将数据存储在本地。在页面加载时，从本地存储中获取数据并将其放入 Vuex 中，这样即使刷新页面，数据也不会丢失。

以下是一个示例代码：

// 在 store 中定义一个 action，在页面加载时从本地存储中获取数据并将其放入 Vuex 中
actions: {
  initData({ commit }) {
    if (localStorage.getItem('myData')) {
      commit('SET_DATA', JSON.parse(localStorage.getItem('myData')))
    }
  }
},
// 在 store 中定义一个 mutation，用于设置数据并将其保存到本地存储中
mutations: {
  SET_DATA(state, data) {
    state.myData = data
    localStorage.setItem('myData', JSON.stringify(data))
  }
}

在页面加载时，在 `created` 钩子函数中调用 `initData` action：

created() {
  this.$store.dispatch('initData')
}

这样就可以实现在刷新页面时，数据不会丢失的功能。