Home Web Front-end JS Tutorial How to prevent data clearing after vuex page refresh

How to prevent data clearing after vuex page refresh

Apr 28, 2018 pm 01:47 PM
vuex refresh page

This time I will show you how to prevent the data from being cleared after the vuex page is refreshed. What are the precautions to prevent the data from being cleared after the vuex page is refreshed? The following is a practical case, let's take a look.

1. Reason

##2. Solution

localStorage has no time limit unless it is removed, session

Storage is a session , the session ends when the browser is closed, has a time limit, and has its own Baidu

I use sessionStorage here. What needs to be noted here is that the variable

in vuex is responsive, but sessionStorage is not , when you change the state in vuex, the component will detect the change, but sessionStorage will not. The page must be refreshed to see the change, so the state in vuex should be obtained from sessionStorage, so that the component can be responsive Changes

3. Specific implementation

The application background is to save the state after the user logs in, and remove the state after exiting

mutations.js

1

2

3

4

5

6

7

8

9

10

11

12

ADD_LOGIN_USER (state,data) { //登入,保存状态 

 sessionStorage.setItem("username", data); //添加到sessionStorage 

 sessionStorage.setItem("isLogin",true); 

 state.username=data,  //同步的改变store中的状态 

 state.isLogin=true 

 }, 

 SIGN_OUT (state) { //退出,删除状态 

 sessionStorage.removeItem("username"); //移除sessionStorage 

 sessionStorage.removeItem("isLogin"); 

 state.username=''  //同步的改变story中的状态 

 state.isLogin=false 

 }

Copy after login
getters.js

1

2

3

4

5

6

7

isLogin (state) { 

 if (!state.isLogin) { 

  state.isLogin=sessionStorage.getItem('isLogin'); //从sessionStorage中读取状态 

  state.username=sessionStorage.getItem('username'); 

 

 return state.username 

 }

Copy after login
The overall implementation idea is to keep the state of the story in vuex consistent with sessionStorage (get the value from sessionStorage)

4. Afterword

I stepped on a big pit before. I didn’t notice that vuex can make components change responsively, allowing the components to directly take the value of sessionStorage. I was still confused. You must refresh to see the effect after exiting.

Additional:

Let’s look at the difference between vuex storage and local storage (localstorage, sessionstorage)

1. Most Important difference: vuex is stored in memory, while localstorage is stored locally in the form of files

2. Application scenarios: vuex is used to transfer values ​​​​between components, while localstorage is mainly used to transfer values ​​​​between different pages. value.

3. Permanence: The value stored by vuex will be lost when the page is refreshed, but localstorage will not.

Note: Many students think that localstorage can be used instead of vuex. It is indeed possible for immutable data, but when the two components share a data source (

object

or

array ), if one of the components changes the data source and wants the other component to respond to the change, localstorage cannot do it. The reason is difference 1. I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of the steps to implement partial printing of the page in angular


Detailed explanation of the use of common vue components

The above is the detailed content of How to prevent data clearing after vuex page refresh. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

6 Ways to Refresh Web Pages on iPhone 6 Ways to Refresh Web Pages on iPhone Feb 05, 2024 pm 02:00 PM

When you browse the web on your iPhone, the loaded content is temporarily stored as long as the browser app remains open. However, the website updates content regularly, so refreshing the page is an effective way to clear out old data and see the latest published content. This way, you always have the latest information and experiences. If you want to refresh the page on iPhone, the following post will explain you all the methods. How to Refresh Web Pages on Safari [4 Methods] There are several methods to refresh the pages you are viewing on the Safari App on iPhone. Method 1: Use the Refresh Button The easiest way to refresh a page you have open on Safari is to use the Refresh option on your browser's tab bar. If Safa

How to copy a page in Word How to copy a page in Word Feb 20, 2024 am 10:09 AM

Want to copy a page in Microsoft Word and keep the formatting intact? This is a smart idea because duplicating pages in Word can be a useful time-saving technique when you want to create multiple copies of a specific document layout or format. This guide will walk you through the step-by-step process of copying pages in Word, whether you are creating a template or copying a specific page in a document. These simple instructions are designed to help you easily recreate your page without having to start from scratch. Why copy pages in Microsoft Word? There are several reasons why copying pages in Word is very beneficial: When you have a document with a specific layout or format that you want to copy. Unlike recreating the entire page from scratch

F5 refresh key not working in Windows 11 F5 refresh key not working in Windows 11 Mar 14, 2024 pm 01:01 PM

Is the F5 key not working properly on your Windows 11/10 PC? The F5 key is typically used to refresh the desktop or explorer or reload a web page. However, some of our readers have reported that the F5 key is refreshing their computers and not working properly. How to enable F5 refresh in Windows 11? To refresh your Windows PC, just press the F5 key. On some laptops or desktops, you may need to press the Fn+F5 key combination to complete the refresh operation. Why doesn't F5 refresh work? If pressing the F5 key fails to refresh your computer or you are experiencing issues on Windows 11/10, it may be due to the function keys being locked. Other potential causes include the keyboard or F5 key

How to customize and edit standby mode on iPhone: What's new in iOS 17 How to customize and edit standby mode on iPhone: What's new in iOS 17 Sep 21, 2023 pm 04:01 PM

Standby is a new feature in the iOS 17 update that provides a new and enhanced way to access information when your phone is idle quickly. With StandBy, you can conveniently check the time, view upcoming events, browse your calendar, get weather updates for your location, and more. Once activated, the iPhone will intuitively enter standby mode when set to landscape while charging. This feature is perfect for wireless charging points like your bedside table, or when you're away from your iPhone charging during daily tasks. It allows you to swipe through various widgets displayed in standby to access different sets of information from various applications. However, you may want to modify these widgets or even delete some based on your preferences and the information you need frequently. So let's dive into

How to quickly refresh a web page? How to quickly refresh a web page? Feb 18, 2024 pm 01:14 PM

Page refresh is very common in our daily network use. When we visit a web page, we sometimes encounter some problems, such as the web page not loading or displaying abnormally, etc. At this time, we usually choose to refresh the page to solve the problem, so how to refresh the page quickly? Let’s discuss the shortcut keys for page refresh. The page refresh shortcut key is a method to quickly refresh the current web page through keyboard operations. In different operating systems and browsers, the shortcut keys for page refresh may be different. Below we use the common W

How to deal with the problem that Laravel page cannot display CSS correctly How to deal with the problem that Laravel page cannot display CSS correctly Mar 10, 2024 am 11:33 AM

"Methods to handle Laravel pages that cannot display CSS correctly, need specific code examples" When using the Laravel framework to develop web applications, sometimes you will encounter the problem that the page cannot display CSS styles correctly, which may cause the page to render abnormal styles. Affect user experience. This article will introduce some methods to deal with the failure of Laravel pages to display CSS correctly, and provide specific code examples to help developers solve this common problem. 1. Check the file path. First check the path of the CSS file.

How to Rearrange, Disable, and Delete iPhone Home Screen Pages How to Rearrange, Disable, and Delete iPhone Home Screen Pages Nov 29, 2023 am 08:22 AM

In iOS, Apple allows you to disable individual home screen pages on your iPhone. It's also possible to rearrange the order of home screen pages and delete pages directly instead of just disabling them. Here's how it works. How to Rearrange Home Screen Pages Touch and hold Space on the Home screen to enter jitter mode. Tap the row of dots that represent Home screen pages. In the Home screen grid that appears, touch and drag a page to rearrange it relative to other pages. Others move in response to your dragging. When you're happy with your new arrangement, tap "Done" in the upper right corner of the screen, then tap "Done" again to exit dither mode. How to Disable or Remove Home Screen Pages Touch and hold Space on the Home screen to enter dither mode. Tap to represent home screen

Use ThinkPHP6 to implement a beautiful 404 page Use ThinkPHP6 to implement a beautiful 404 page Jun 20, 2023 am 11:06 AM

As the Internet develops, many websites or applications have gradually become more complex. When users use it, they often encounter error pages, the most common of which is the 404 page. The 404 page means that the page being accessed does not exist and is a common error page. For websites or applications, a beautiful 404 page can greatly improve the user experience. In this article, we will introduce how to use ThinkPHP6 to quickly implement a beautiful 404 page. Create a route First, we need to create an err in the route folder

See all articles