vuex中使用vuex-persistedstate插件实现数据持久化

vuex是在中大型项目中必不可少的状态管理组件，刷新会重新更新状态，但是有时候我们并不希望如此。例如全局相关的，如登录状态、token、以及一些不常更新的状态等，我们更希望能够固化到本地，减少无用的接口访问，以及更佳的用户体验。

• 那么我们可以采用存储到localStorage的方式来解决这一问题，
• 也可以监听页面刷新的时候重新处理数据
• 也可以用现在比较流行的插件vuex-persistedstate来解决（其实他的原理也是存储在了local storage，但是不用我们手动去处理了）

让我们来看下使用插件是如何做到持久化的

1.安装插件

npm i vuex-persistedstate --save

2.之前怎么写vuex的数据管理还怎么写，只不过在store/index.js文件引入一下这个插件，并配置即可

这种默认写法会将vuex中的所有数据存储到Local Storage中，

import createPersistedState from 'vuex-persistedstate'
export default new Vuex.Store({
    // ...
    plugins: [createPersistedState ()]
})

如果我们想存储到sessionStorage，又或者只想持久化某些数据的话，可以使用以下两个属性：

storage和reducer

  plugins: [createPersistedState({
    storage: window.sessionStorage,
    reducer(val) {
      console.log(val)
      return {
        // 只储存state中的includes的leftList数据【这里多了一层includes，是因为本项目原因，大家可以打印一下val根据自己项目情况来赋值】
        leftList: val.includes.leftList
      }
    }
  })
]

 完整代码如下：

 测试1：将所有数据存储到Session Storage中

  测试2：将某个数据存储到Local Storage中

另，Vue3中如果项目使用了ts，那么Vuex对ts是不太友好的，可以考虑使用pinia插件代替vuex