vuex-persistedstate的使用

Vuex-persistedstate是一个Vuex插件，用于在浏览器本地存储中保存Vuex store的状态，以便在页面重新加载时恢复状态。

安装

npm install vuex-persistedstate

使用

在main.js文件中引入该插件并在Vuex.Store()中添加plugins选项。

import VuexPersistence from 'vuex-persistedstate'

const store = new Vuex.Store({
  // ...
  plugins: [
    VuexPersistence({
      key: 'my-app',
      storage: window.localStorage
    })
  ]
})

- key: 在本地存储中使用的键名。
- storage: 选择本地存储机制，如使用localStorage或sessionStorage。

该插件还支持将存储的内容过滤，以便只存储store中的特定模块。

import VuexPersistence from 'vuex-persistedstate'

const store = new Vuex.Store({
  // ...
  plugins: [
    VuexPersistence({
      key: 'my-app',
      storage: window.localStorage,
      reducer: state => ({
        user: state.user,
        cart: state.cart
      })
    })
  ]
})

在此示例中，只存储了store中的user和cart模块。

总结

Vuex-persistedstate是一个非常有用的插件，它可以帮助我们在本地存储中保存Vuex store的状态，以便在页面重新加载时恢复状态。它还支持过滤存储的内容，以便只存储store中的特定模块。