Vuex 状态是否有必要进行持久化？”

今天我遇到一个问题：如何在 Vuex 中实现数据持久化。解决这个问题其实很简单，因为有相应的插件，并且 Vuex 也提供了相应的钩子来处理。但在回答这个问题之前，我觉得需要认真思考一下：Vuex 的状态真的需要持久化吗？

Vuex 的基本流程

这是一张 Vuex 官网的截图

，清晰地展示了 Vuex 的基本流程。

从图中我们可以看到，action 处理 API 请求，然后提交给 mutation，mutation 改变当前状态（通常是数据），最后通知组件更新 UI。同时，组件也可以直接触发 action，形成循环。

实现持久化的简单思路

当谈到持久化时，一般会使用 localStorage、sessionStorage 或 indexedDB 这三种前端持久化方式，因为 cookie 的存储容量太小，已经逐渐被淘汰。而后端的持久化不在我们讨论的范围内。

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

Vuex 也支持插件系统，有 subscribe 方法可以订阅 mutation。因此，我们可以很方便地实现状态的持久化。但在这一点上，我认为我们需要认真思考一下：Vuex 的状态真的需要持久化吗？

Vuex 的状态真的需要持久化吗？

举例来说，假设我们有一个简单的用户界面，用于登录和显示信息。

<code>-> 登录 -> 用户信息 Mutation -> 状态更新 -> 组件 A、B、C 更新</code>

如果在这个流程中我们持久化了状态，理论上可以直接加载状态，然后通知组件更新，看起来似乎速度会更快。但是真的是这样吗？

有一个重要的问题是数据的更新。用户名和头像可能会变化，缓存的数据永远是旧的，所以当你需要刷新数据时，仍然需要向 API 请求新数据。

另一个重要的问题是安全性。当我们的代码被混淆压缩后，具备了一定的安全性，但如果数据被持久化，任何人只要按 F12 就可以查看到你的全部数据。

此外，持久化后难以处理网络问题。尽管用户网络不正常时依然能正常显示，但当用户进行其他操作时可能会出错，这种问题很难处理。

不能完全不持久化

当然，有些数据需要被初始化，这些数据通常是不经常更新或完全不需要更新的。例如，你可以将这些数据存储在 config.js 文件中，

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

然后在 state.js 中导入使用；或者你可以在 App.vue 中使用 mounted 钩子来初始化数据

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