vuex-persistedstate怎么用

vuex-persistedstate是一个Vuex插件，它可以将Vuex store中的数据持久化到浏览器的本地存储中，以便在页面刷新或关闭后仍然可以保留数据。以下是如何使用vuex-persistedstate的步骤：

1. 安装vuex-persistedstate插件：

npm install vuex-persistedstate --save

2. 在Vue项目中引入vuex-persistedstate插件：

import createPersistedState from 'vuex-persistedstate';

3. 在Vuex store中使用vuex-persistedstate插件：

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'

Vue.use(Vuex)

export default new Vuex.Store({
  plugins: [
    createPersistedState()
  ],
  state: {
    // Vuex state
  },
  mutations: {
    // Vuex mutations
  },
  actions: {
    // Vuex actions
  }
})

4. 在Vuex store中添加配置项：

export default new Vuex.Store({
  plugins: [
    createPersistedState({
      key: 'myVueApp', // 存储到本地存储中的key值
      paths: ['state1', 'state2'], // 指定需要持久化的state
      storage: window.sessionStorage // 指定要使用的本地存储，可以是localStorage或sessionStorage，默认为localStorage
    })
  ],
  state: {
    state1: 'value1',
    state2: 'value2',
    state3: 'value3'
  },
  mutations: {
    // Vuex mutations
  },
  actions: {
    // Vuex actions
  }
})

在上面的示例中，我们指定了要持久化的state1和state2，而state3不会被持久化。我们还指定了存储到本地存储中的key值为myVueApp，使用的存储方式为sessionStorage。

这样，在每次Vuex store中的state发生变化时，都会自动将指定的state持久化到本地存储中，以便在页面刷新或关闭后仍然可以保留数据。