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

Editor to share with you how to use the data persistence plug-in vuex-persistedstate in vuex, I believe most people do not know much about it, so share this article for your reference. I hope you will learn a lot after reading this article. Let's learn about it together.

Data persistence vuex-persistedstate usage

Vuex is an essential state management component in large and medium-sized projects, refresh will update the status, but sometimes we do not want to do so. For example, globally relevant, such as login status, token, and some infrequently updated status, we prefer to be able to solidify locally, reduce useless interface access, and have a better user experience.

Installation start npm I vuex-persistedstate-- save

Current environment version:

"vue": "^ 2.5.2"

"vue-router": "^ 3.0.1"

"vuex": "^ 3.4.0"

"vuex-persistedstate": "^ 3.0.1"

Vuex has been upgraded to 3, looked at release note did not find too excessive upgrade, it is not expected that there will be incompatibility, interested partners can upgrade to experience.

Configuration and u

Introduced as a component when vuex is initialized.

Import persistedState from 'vuex-persistedstate'export default new Vuex.Store ({/ /... plugins: [persistedState ()]}) Custom Storage method

Vuex-persistedstate uses localStorage to solidify data by default. How to deal with some special cases? (for example, the seamless browsing mode of safari)

Situations where you need to use sessionStorage

Plugins: [persistedState ({storage: window.sessionStorage})]

The use of cookie

Import persistedState from 'vuex-persistedstate'import * as Cookies from' js-cookie' export default new Vuex.Store ({/ /... Plugins: [persistedState ({storage: {getItem: key = > Cookies.get (key), setItem: (key, value) = > Cookies.set (key, value, {expires: 7}), removeItem: key = > Cookies.remove (key)})}) want to use cookie in the same way

All state are persisted by default

Specify the state that needs to be persisted, configured as follows

Import createPersistedState from "vuex-persistedstate" const store = new Vuex.Store ({/ /... Plugins: [createPersistedState ({storage: window.sessionStorage, reducer (val) {return {/ / only store assessmentData assessmentData: val.assessmentData} in state)]

How vuex refers to multiple plug-ins

For example, vuex prompt plug-ins and persistent plug-ins are used together, and the configuration is as follows

Import createPersistedState from "vuex-persistedstate" import createLogger from 'vuex/dist/logger'// judge environment vuex hints that const debug = process.env.NODE_ENV! =' production'const createPersisted = createPersistedState ({storage: window.sessionStorage}) export default new Vuex.Store ({/ /... plugins: debug? [createLogger (), createPersisted]: [createPersisted]})

If plugins is an one-dimensional array, otherwise it will parse the error.

Problems encountered with the vuex-persistedstate plug-in

This is a plug-in for persistence: vuex-persistedstate

When I was working on a project, I encountered a problem, that is, when I was doing the following function, when rendering data, because this data was used in many places, I saved it in vuex. Vuex stores the data in the browser's memory, and the refresh is gone.

This line of code is written in vuex, that is, I get the data directly from the local place.

List: JSON.parse (window.localStorage.getItem ('abc')) .category.list | | []

Look at the code directly: I thought so at first, since I have data in vuex, I don't have to calculate whether the attributes are OK or not, I can render directly, but how to render the brand, push doesn't work, then I can only write the structure to death, but the page effect is not right, so this place uses computational properties, first, dynamically take the first two items, second, you can dynamically add a new li structure.

The scene used by the calculation attribute: there is data, but it is not in the format I want. It needs to be processed.

Setup () {const brand = reactive ({id: 'brand', name:' brand', children: [{id: 'brand-children', name:' brand recommendation'}]}) const store = useStore () const cateList = computed (() = > {const list = store.state.category.list.map (item = > {return {id: item.id) Name: item.name, children: item.children & & item.children.slice (0,2)}) list.push (brand) return list}) return {cateList}} above are all the contents of the article "how to use the data persistence plug-in vuex-persistedstate in vuex" Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.