Today I saw a problem: how to persist data in VUex. There are plugins for vuex and hooks for vuex. But before I ask this question, I think I need to think carefully: Does Vuex’s state really need to be persisted?

Basic flow of VUEX

This is a screenshot of vuex’s official website, showing the basic process of Vuex in great detail

From this diagram, we can roughly see that the Action processes the API, then commits to mutation, which changes the current state, which is the data in the usual sense, and then tells the component to update the UI. At the same time, the component can directly trigger an action and then go through the loop.

A simple idea for persistence

When we talk about persistence, we generally use localStorage, sessionStorage,indexedDB three front-end persistence, cookie due to too little storage capacity, has been gradually abandoned. Persistence on the back end is beyond the scope of this discussion.

These three methods can basically meet the requirements, whether it is read speed, or storage capacity. LocalStorage and sessionStorage are synchronous, and indexedDB is asynchronous.

In addition, VUex also supports plug-in system. There is a subscribe method to subscribe mutation, so we can easily implement the persistence of state. At this time, I think we need to seriously consider: does VUex really need to persist state?

Does VUex’s state really need to be persisted?

For example, we have a simple user interface that logs in and displays information.

Graph of TD A [login] -- > | request | B (the userInfo) B > C {mutation} C -- - > | change | E [state] E - > F components [A] -- > H E components [B] E - > I components [C]

If we persisted state in this process, we could theoretically load state directly and then notify the component to update it, which seems much faster in terms of the process. But is that really the case?

One of the most important issues is that the data needs to be updated

The user name may change, the avatar may change, the cached data will always be old, the new data will always need to request the API, and when you need to refresh the data, you still need to go through the VuEX process.

Another important issue is security

When our code is obfuscated and compressed, it has some security, at least by simply looking at the source code, breaking points, it is difficult to understand the logic. But if you persist your data, then anyone who knows F12 can see all of your current data.

Difficult to deal with network problems

If you persist it, it will still work when the user’s network is abnormal, but when the user does something else, it will fail again, which is difficult to handle. Otherwise, use serviceWorker

It can’t be completely nonpersistent

Of course, some data needs to be initialized, which is often not updated very often, or not updated at all. For example, you can do this

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

Or you can commit in app.vue

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

conclusion

For this problem, I think persistence of the entire state is meaningless and adds to the loss, but persistence of some variables is necessary. So, what do you guys think about this?