Shulou(Shulou.com)06/02 Report--

This article focuses on "how to persist vuex". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to persist vuex.

Vuex can manage the state globally, but the data will disappear after refresh, which we don't want to see. How to solve this problem? we can persist the data state with local storage or through the plug-in vuex-persistedstate.

How to persist the state of vuex

1. Manually utilize the local storage of HTML5

Method

1. The state of vuex is selected in localStorage or sessionStorage.

2. In mutations, the defined method not only operates on the state of vuex, but also does corresponding operations on storage.

So the state exists with the storage and synchronizes with the vuex

two。 Using the vuex-persistedstate plug-in

In fact, the principle of the plug-in is also combined with the storage mode, but the unified configuration does not need to manually write the storage method every time.

Method of use

Installation

Npminstallvuex-persistedstate--save

Introduction and configuration: in index.js under store

ImportcreatePersistedStatefrom "vuex-persistedstate"

Conststore=newVuex.Store ({

/ /...

Plugins: [createPersistedState ()]

})

Stored to localStorage by default

To store it to sessionStorage, configure it as follows

ImportcreatePersistedStatefrom "vuex-persistedstate"

Conststore=newVuex.Store ({

/ /...

Plugins: [createPersistedState ({

Storage:window.sessionStorage

})]

})

All state are persisted by default

The usage of vuex

Installation:

Npminstallvuex-persistedstate--save

Vuex initialization begins to introduce:

Every time we update the status of vuex, the vuex in localstorage changes accordingly.

Vuex-persistedstate uses localStorage by default to solidify data.

At this point, I believe you have a deeper understanding of "how to do the persistence of vuex". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.