vuex结合localStorage做本地存储

Vuex是一个专为Vue.js应用程序设计的状态管理模式，它允许你在单个store中集中管理应用的所有共享状态。然而，Vuex本身并不直接支持持久化存储，如localStorage。你可以将localStorage集成到Vuex中来实现数据的本地持久化。

以下是基本步骤：

1. **创建getter**：在Vuex store中添加一个getter，用于读取localStorage中的数据。

const state = {
  // ...
};
const getters = {
  localData: () => localStorage.getItem('yourDataKey') || {}
};

2. **保存数据**：当需要更新或设置数据时，先从store中获取值，然后通过`setItem`同步到localStorage。

mutations: {
  saveLocalData(state, data) {
    localStorage.setItem('yourDataKey', JSON.stringify(data));
  }
}

3. **监听变化**：为了实时同步状态，可以在组件的生命周期钩子（如`beforeDestroy`）或适当的地方清除localStorage数据，或者在每次更新数据后立即保存。

4. **恢复数据**：在组件挂载时，从localstorage加载数据并将其注入到state中。

created() {
  this.$store.dispatch('loadFromLocalStorage');
},
methods: {
  async loadFromLocalStorage() {
    const data = await this.$store.getters.localData;
    this.$store.commit('setInitialData', data);
  }
}