Shulou(Shulou.com)05/31 Report--

This article "misquoted vuex-persistedstate leads to user information can not be cleared how to solve" most people do not understand, so the editor summed up the following content, detailed, clear steps, with a certain reference value, I hope you can get something after reading this article, let's take a look at this "misquoted vuex-persistedstate led to user information can not be cleared how to solve" article.

Vuex-persistedstate causes the problem that user information cannot be cleared

The website uses nuxt framework and js-cookie+vuex to store user information. In this article, about nuxt using vuex to store and obtain user information, I said that nuxt is the integration of server and client rendering, so the server initializes the user information to null, and the client cannot initialize it again. Even if the client can get the user information in the cookie, it cannot assign a value to user.

Later, I searched the Internet for a long time and introduced vuex-persistedstate, but after it was introduced, I did not use it and did not delete it in time. I still used cookie to obtain user information on the client side, cleared the user information in cookie, and found that user information still existed. After investigation, I found that localStorage stored a copy of user information. Step by step, I found that it was because I called vuex-persistedstate to store user information and token in localStrorage, but only cleared token in vuex when logging out. The user information is not cleared, which leads to the problem.

Solution.

Delete the vuex-persistedstate or clear the user information in the vuex when you log out.

Extend

1. Based on the above problems, I studied vuex-persistedstate and found three points: storage location: default localStorage (permanently stored locally, which can only be deleted manually), which can be modified to sessionStorage (none if you close the browser); storage object key: default is vuex, which can be modified arbitrarily; storage object: store.

Using vuex-persistedstate in nuxt, by introducing it globally in nuxt.config.js

LocalStorage.js

Import createPersistedState from 'vuex-persistedstate' export default ({store}) = > {_ window.onNuxtReady (()) = > {createPersistedState ({key:' paida-vuex', storage: window.sessionStorage}) (store)})}

Nuxt.config.js

Plugins: [{src:'~ / plugins/localStorage', ssr: false}]

2. Cookie disable problem: because the website is in the user information and token stored in cookie, login-related operations cannot be carried out after it is disabled. Google, Firefox disable cookie, resulting in localStorage,sessionStorage can not be used properly.

In addition, a whimsical test was done to directly introduce store into the configuration file of axios to get token, and even if you log in to get token, you update store, but because axios is introduced as an external plug-in and does not belong to the vue component, you cannot get the latest information about token.

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 is the content of this article on how to solve the problem that user information cannot be cleared due to misreference of vuex-persistedstate. I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please pay attention to 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.