Article directory
Preface
How can I put it this way, when I was developing a corporate project, since I had just graduated, my technical skills were not broad enough, and my knowledge of things was not deep enough. And the saddest thing was that I had to figure it all out by myself, so miserable! !
For business needs, I am wondering how to ensure that there is no need to log in again after refreshing? ? Because the content of vuex will be reloaded when the page is refreshed! I understand everything.
1. Is there any solution?
1.cookie
The first thing that comes to mind is the front-end cookie, but the process of saving and retrieving is very troublesome, and some browsers, such as Google, sometimes ask whether cookies can be saved, which is very annoying. And the cookie storage is not big.
2.localstorage
Local storage, but storage is hard to describe. Although it is also very useful, it is not suitable for projects. Here is an excerpt of the explanation.
In theory, localStorage is permanently valid, that is, it will not disappear if it is not cleared actively. Even if the saved data exceeds the size specified by the browser, the old data will not be cleared and only an error will be reported. However, it should be noted that in the browser on the mobile device or the WebView used by each Native App, localStorage is unreliable and may occur due to various reasons (such as exiting the App, network switching, insufficient memory, etc.) was emptied.
My personal need is to clear all content after closing the web page. Obviously not suitable.
3.sessionStorage
As the name suggests, the lifetime of sessionStorage is similar to session. As long as the browser is closed (including the browser tab), it will be cleared. Since the lifetime of sessionStorage is too short, its application scenarios are very limited, but on the other hand, it is not prone to abnormal situations and is relatively reliable.
Hey, it's very good, very adaptable and meets my needs.
Once you have a direction, let’s get started! ! !
After checking the information later, I learned about persistent vuex. Its prerequisites are also implemented through the previous three methods, and the requirement of not overloading the content has been met! !
The following focuses on using this plug-in to implement it! !
2. Environmental preparation
1. Import the library
The plug-in used is vuex-persistedstate.
This is the version I use.
Install it first! ! !
npm install --save vuex-persistedstate
2. Reference in vuex
Enter the index.js file (vue3 version) in the store and introduce the plug-in
The code is as follows (example):
import persistedstate from "vuex-persistedstate";
Introduced in configuration items
plugins: [persistedstate({
storage: sessionStorage })],
Due to project needs, sessionStorage is used here. This plug-in supports all three methods introduced earlier, so the compatibility is quite good! !
It’s as simple as that and that’s it! !
Attached is my complete vuex code! !
import Vue from "vue";
import Vuex from "vuex";
import persistedstate from "vuex-persistedstate";
Vue.use(Vuex);
export default new Vuex.Store({
plugins: [persistedstate({
storage: sessionStorage })],
state: {
//用户信息
user: {
info: {
},
validArticle: 0,
token: "",
},
},
getters: {
},
mutations: {
getusertoken(state, val) {
state.user.token = val;
},
},
actions: {
},
modules: {
},
});
Here I will take the user’s token as an example
! ! ! Note that you must use methods to store values in mutations. Anyway, the first time I used this.$store.state.user.token to store directly, the plug-in did not take effect. I don’t know why or what it is. Reason, this way is okay
3. Verify whether the code is available
First, call the value storage method in vuex through commit to perform the value storage operation.
this.$store.commit('getusertoken', 'aaaaa')
Check the results. If this plug-in does not apply other configuration items, it will store all the contents in the state in vuex by default, and the key name is vuex.
You can print it out and view it in the mounted function in any vue file. The code is attached.
console.log(sessionStorage.getItem('vuex'))
I am still using it now and there is no problem. If you have any questions in the future, you can leave a message and solve it together! !
In this way, the simplest configuration is completed. Refresh with f5, and the vuex content will not disappear unless you close the web page! !
Attach plug-in configuration items
The project is on schedule and I haven’t studied it carefully. I will slowly add to
the plug-in official website github later: https://github.com/robinvdvleuten/vuex-persistedstate.
The documentation is very complete. If you are interested, you can check it out for yourself! ! !