vuex实现持久化存储

一、为什么需要数据持久化

vuex的state数据刷新页面的时候数据都会被清空，在某些情况下，我们需要这些状态能保存下来，比如登录后的用户信息、Token、主题配置等。

vuex优势：相比sessionStorage，存储数据更安全，sessionStorage可以在控制台被看到。

vuex劣势：在F5刷新页面后，vuex会重新更新state，所以，存储的数据会丢失。

持久化原理：结合本地存储做到数据状态持久化，使页面刷新后数据不会初始化为默认状态。

二、持久化方案

主要有两种：

• 采用localStorage本地存储
• 使用vuex的插件vuex-persistedstate

三、项目中使用数据持久化

我在项目中，主要使用了第二种——插件vuex-persistedstate

• 下载：npm install vuex-persistedstate
• 配置文件：

import createPersistedState from 'vuex-persistedstate';
 
Vue.use(Vuex);
export default new Vuex.store({
   
    //...
    plugins:[createPersistedState] // 注意
})

具体可以参考以下文章：vuex如何实现持久化存储