vuex的state真的需要持久化吗?

1,190 阅读3分钟

今天看到一个问题:vuex里的数据如何持久化。其实解决这个问题很简单,有相应的插件,而且vuex也有相应的钩子来处理。但是,问这个问题之前,我觉得需要认真思考一下:vuex的state真的需要持久化吗?

vuex的基本流程

这是一张vuex官网的截图,很详细的显示出来了vuex的基本流程 image.png

从这张图中,我们可以大概看出来,action处理API,然后提交给mutation,mutation会改变当前状态,也就是通常意义上的数据,然后会通知组件更新UI。同时,组件也可以直接触发action,然后进行如上循环。

实现持久化的简单思路

当我们说持久化的时候,一般都会用到localStorage、sessionStorage,indexedDB这三种前端的持久化,cookie由于存储容量太少,已经被渐渐放弃了。后端的持久化不在本次讨论范围内。

这三种方式基本都能满足需求,无论是读取速度,还是存储的容量。其中,localStorage、sessionStorage是同步的,indexedDB是异步的。

而且vuex也支持插件系统,有subscribe方法可以订阅mutation,因此我们可以很方便的实现state的持久化,这时候我觉得需要认真思考一下:vuex的state真的需要持久化吗?

vuex的state真的需要持久化吗?

例如,我们有一个简单用户界面,就是登录,显示信息。

graph TD
A[登录] -->|request| B(userInfo)
B --> C{mutation}
C --> |change| E[state]
E --> F[组件A]
E --> H[组件B]
E --> I[组件C]

如果在这个流程中,我们持久化了state,理论上就可以直接加载state,然后通知组件更新,从流程上看,似乎快速了很多。但是真的是这样吗?

其中有一个重要的问题,就是数据要更新

用户名有可能改,头像有可能改,缓存的数据永远是旧的,新的数据永远需要请求API,当你需要刷新数据的时候,你仍旧需要走一遍vuex流程。

另一个重要的问题,就是安全性

当我们的代码被混淆压缩后,具备了一定的安全性,最起码通过简单的看源码,打断点,是很难摸清逻辑的。但是如果你把数据持久化了,那么任何人只要会F12都可以看见你的当前全部数据。

难以处理网络问题

如果你做了持久化,那么用户网络不正常的时候依旧能正常显示,但是当用户进行其他操作时,又会出错,这种问题难以处理,要不然就用serviceWorker

不能完全不持久化

当然,有些数据需要被初始化,这部分数据往往是不经常更新的,或者完全无需更新的。 例如你可以这样操作

//config.js
export default [{a:1},{a:2},{a:3}]
//state.js
import arr1 from './config.js'
export default {
    arr:arr1
}

或者你可以在App.vue中commit体交

mounted(){
    if(localStorage.getItem('arr')){
        try{
            const arr = JSON.parse(localStorage.getItem('arr'))
            commit('setArr',arr)
        } catch(e){
            //do sth
        }
    
    }
}

结语

对于这个问题,我觉得整个state的持久化并无意义,并且增加了损耗,但是部分变量的持久化很有必要。那么,看文章的你们呢,对于这个问题有什么看法?