Web Front-end
JS Tutorial
Refresh the page vuex data does not disappear and the page does not jump problem (detailed tutorial)
Refresh the page vuex data does not disappear and the page does not jump problem (detailed tutorial)
This article mainly introduces the detailed explanation of how to prevent the vuex data from disappearing and not jumping to the page when refreshing the page. Now I share it with you and give it as a reference.
Let me talk about something first
I have been tinkering with vuex and routing interception for a while, and finally got out of it. I am here to share it. First of all, I will state that there is nothing. Basic introduction, using the login state storage sessionStorage method!!!
Get to the point
Refresh
Refresh quite Unlike restarting the project, the data previously obtained is only temporarily stored through the store and disappears when the project is closed. This is a bit like restarting the computer and the data stored in RAM will disappear. But the content stored in sessionstorage, localstorage and cookies will not disappear.
Vuex
Method ideas
First of all Familiar with vuex, the official website introduces that Vuex is a state management model specially developed for Vue.js applications. That is to say, the data in the store in vuex are temporary and are some variables. When the page is refreshed and reloaded, everything will be cleared. , and there has been no second login in the page, the vuex has always been empty, so several methods have been derived
1. Because sessionstorage (the page will disappear when closing the page), localstorage and cookie refresh the page The data will not disappear, so you can store all the requested data in it and retrieve it when you use it
2. Use the vuex plug-in
3. When logging in, put the token and login status (Customized) Assign a value to sessionstorage. When the page is refreshed (route jump), the token and login status are obtained from sessionstorage and assigned to the store, and the data of the relevant page will be re-requested.
After thinking about it, I I chose method 3, but this method needs to be combined with routing interception. After the routing is completed, post the code
code
index
// 登录
Login({ commit, state }, userInfo) {
return new Promise((resolve, reject) => {
login(userInfo).then(response => {
let token = response.data.token;
commit('SET_TOKEN', token);
sessionStorage.setItem('token', token); //获取到新的token的时候赋值给sessionStorage
commit('SET_ISLOGIN', true); // 登录成功修改store中的登录状态
resolve()
}).catch(error => {
reject(error)
})
})
},Routing
Brief introduction: Route interception is equivalent to the 'life cycle' of the route. Insert a method at different time periods of the route. You can here What do you want to do during the time period? This time you only do things before the route jumps, so just use router.beforeEach((to, from, next) => { // ... }). The specific content is official website Very detailedmain.jsrouter.beforeEach((to, from, next) => {
let isLogin = sessionStorage.getItem('isLogin');
let token = sessionStorage.getItem('token');
let id = sessionStorage.getItem('id');
if (to.meta.requireAuth) { // 判断是否有权限
if (!store.state.isLogin && !isLogin && to.path !== '/login') { // store和sessionStorage中登录状态都为false并且跳转到 不是登录的页面时 都强行跳转到登录页面
next({
path: '/login',
});
} else if (!isLogin && to.path !== '/login') { // 已经在登录页面进入首页的时候
sessionStorage.setItem('isLogin', store.state.isLogin);
next();
} else if (isLogin && to.path !== '/login') { // 登录进入后刷新页面时
store.commit('SET_TOKEN', token);
store.commit('SET_ISLOGIN', isLogin);
store.commit('SET_ID', id);
next();
} else {
next();
}
}
else {
next();
}
});pit
1. I wrote the route interception in the main.js file, so be careful It should be written above the vue mount (new Vue)2. When clicking login, the login method in actions must be earlier than the route interception
3. Don’t forget to delete the variables in sessionStorage when logging out.
Use gm to crop the synthesized image under Nodejs
How to use babel installation and configuration tutorial
The above is the detailed content of Refresh the page vuex data does not disappear and the page does not jump problem (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
![How to solve the problem 'Error: [vuex] unknown action type: xxx' when using vuex in a Vue application?](https://img.php.cn/upload/article/000/887/227/168766615217161.jpg?x-oss-process=image/resize,m_fill,h_207,w_330)
How to solve the problem 'Error: [vuex] unknown action type: xxx' when using vuex in a Vue application?
Jun 25, 2023 pm 12:09 PM
In Vue.js projects, vuex is a very useful state management tool. It helps us share state among multiple components and provides a reliable way to manage state changes. But when using vuex, sometimes you will encounter the error "Error:[vuex]unknownactiontype:xxx". This article will explain the cause and solution of this error. 1. Cause of the error When using vuex, we need to define some actions and mu
![How to solve the problem 'Error: [vuex] do not mutate vuex store state outside mutation handlers.' when using vuex in a Vue application?](https://img.php.cn/upload/article/000/000/164/168760467048976.jpg?x-oss-process=image/resize,m_fill,h_207,w_330)
How to solve the problem 'Error: [vuex] do not mutate vuex store state outside mutation handlers.' when using vuex in a Vue application?
Jun 24, 2023 pm 07:04 PM
In Vue applications, using vuex is a common state management method. However, when using vuex, we may sometimes encounter such an error message: "Error:[vuex]donotmutatevuexstorestateoutsidemutationhandlers." What does this error message mean? Why does this error message appear? How to fix this error? This article will cover this issue in detail. The error message contains
Best practices for using Vuex to manage global state in Vue2.x
Jun 09, 2023 pm 04:07 PM
Vue2.x is one of the most popular front-end frameworks currently, which provides Vuex as a solution for managing global state. Using Vuex can make state management clearer and easier to maintain. The best practices of Vuex will be introduced below to help developers better use Vuex and improve code quality. 1. Use modular organization state. Vuex uses a single state tree to manage all the states of the application, extracting the state from the components, making state management clearer and easier to understand. In applications with a lot of state, modules must be used
How to use Vuex in Vue3
May 14, 2023 pm 08:28 PM
What does Vuex do? Vue official: State management tool What is state management? State that needs to be shared among multiple components, and it is responsive, one change, all changes. For example, some globally used status information: user login status, user name, geographical location information, items in the shopping cart, etc. At this time, we need such a tool for global status management, and Vuex is such a tool. Single-page state management View–>Actions—>State view layer (view) triggers an action (action) to change the state (state) and responds back to the view layer (view) vuex (Vue3.
Learn more about the implementation principles of vuex
Mar 20, 2023 pm 06:14 PM
When asked in an interview about the implementation principle of vuex, how should you answer? The following article will give you an in-depth understanding of the implementation principle of vuex. I hope it will be helpful to you!
How to solve the problem 'TypeError: Cannot read property 'xxx' of undefined' when using vuex in Vue application?
Aug 18, 2023 pm 09:24 PM
Using Vuex in Vue applications is a very common operation. However, occasionally when using Vuex, you will encounter the error message "TypeError: Cannotreadproperty'xxx'ofundefined". This error message means that the undefined property "xxx" cannot be read, resulting in a program error. The reason for this problem is actually very obvious. It is because when calling a certain attribute of Vuex, this attribute is not correctly set.
How to use vuex in vue3+vite
Jun 03, 2023 am 09:10 AM
Specific steps: 1. Install vuex (vue3 recommended 4.0+) pnpmivuex-S2, configure the global configuration of importstorefrom'@/store'//hx-app in main.js constapp=createApp(App)app.use(store) 3. Create new related folders and files. Here, configure multiple js inside different vuex. Use vuex modules to place different pages and files, and then use a getters.jsindex.js core file. Import.meta.glob is used here. , instead of
How to use vuex for component communication in Vue?
Jul 19, 2023 pm 06:16 PM
How to use vuex for component communication in Vue? Vue is a popular JavaScript framework that adopts a component-based development model, allowing us to build complex applications more easily. In the component development process of Vue, we often encounter situations that require communication between different components. Vuex is the state management tool officially recommended by Vue. It provides a centralized storage manager and solves the problem of communication between components. This article will introduce how to use Vuex for component communication in Vue
