vuex和localstorage结合

在Vue.js中，Vuex是一个状态管理库，用于管理应用程序的所有组件的状态。而localStorage是浏览器提供的一种本地存储机制，可以将数据存储在用户的浏览器中。将Vuex和localStorage结合使用可以实现在刷新页面或关闭浏览器后仍然保留应用程序的状态。

具体实现方法是，在Vuex的store中添加一个插件，该插件会在每次mutation被调用时将state存储到localStorage中。在应用程序启动时，从localStorage中读取state并将其设置为Vuex store的初始状态。

以下是一个简单的示例：

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  plugins: [
    (store) => {
      // 在每次 mutation 之后调用
      store.subscribe((mutation, state) => {
        // 将 state 存储到 localStorage 中
        localStorage.setItem('my-app-state', JSON.stringify(state))
      })
    }
  ]
})

// 在应用程序启动时从 localStorage 中读取 state
const savedState = JSON.parse(localStorage.getItem('my-app-state'))
if (savedState) {
  store.replaceState(savedState)
}