为什么需要vuex状态持久化

原因：因为Vuex是基于内存，存在内存里面的，刷新网页之后就没有了，不会持久化储存

持久化插件vuex-persistedstate的使用

1、安装vuex-persistedstate

npm i vuex-persistedstate

2、在store中新建modules文件夹，新建module1.js、module2.js……等文件分模块进行管理
3、在store中index.js里引入createPersistedState方法，将需要持久化的模块进行配置

import createPersistedState from "vuex-persistedstate"
import module1 from './modules/module1'
import module2 from './modules/module2'
import module3 from './modules/module3'

//vue2.0 创建仓库 new Vuex.Store({})
//vue3.0 创建仓库 createStore({})
export default createStore({
  modules: {
    module1,
    module2,
    module3
  },
  plugins: [
    createPersistedstate({
      key: 'store',//存储持久状态的键
      paths: ['module1', 'module3']//部分持续状态的任何路径的数组。如果没有路径给出，完整的状态是持久的。
    })
  ]
})