Analysis on the problem of data loss caused by forced refresh of vuex

Analysis on the problem of data loss caused by forced refresh of vuex

vuex-persistedstate

  1. Core principle: store all vuex data in local storage, fetch data from cache when page refreshes, and put it in vuex
  2. Download: $ npm install vuex-persistedstate -S
  3. Introducing plugins into the store
import persistedState from 'vuex-persistedstate'
const store = new Vuex.Store({
  // ...
  plugins: [persistedState()]
})

vuex-persistedstate uses localStorage for storage by default. If you want to use sessionStorage, you can use the following configuration

import persistedState from "vuex-persistedstate"
const store = new Vuex.Store({
  // ...
  plugins: [persistedState ({
      storage: window.sessionStorage
  })]
})
  • If you want to use cookies, you can use the following configuration
  • Download: $ npm install js-cookie -S
import Cookies from 'js-cookie';
import persistedState from "vuex-persistedstate"
const store = new Vuex.Store({
  // ...
  plugins: [persistedState ({
      storage:
		getItem: key => Cookies.get(key),
		setItem: (key, value) => Cookies.set(key, value),
		removeItem: key => Cookies.remove(key)
	}
  })]
})

secure-ls

  • Encrypted storage
  • When we save user information in vuex, although it is much more convenient to use, in order to solve the problem of data loss when vuex refreshes the page, the vuex-persistedstate plug-in is used. vuex-persistedstate is not encrypted, and the user's information is exposed in the cache.
  • It is very unsafe, so you need to use secure-ls to encrypt storage.
  • Download: $ npm install secure-ls -S
import Vue from "vue";
import Vuex from "vuex";
import SecureLS from 'secure-ls';
import persistedState from "vuex-persistedstate";

const ls = new SecureLS({
	encodingType: "aes", // encryption method isCompression: false, // whether to enable data compression encryptionSecret: "old-beauty" // 
});

Vue.use(Vuex);

export default new Vuex.Store({
	...
	plugins: [persistedState({
		// key: "123123", // key to store in storage
		storage:
			getItem: key => ls.get(key),
			setItem: (key, value) => ls.set(key, value),
			removeItem: key => ls.remove(key)
		}
	})],
});

[Note] vuex-persist(不兼容ie) vuex-persistedstate

This is the end of this article about vuex forced data loss. For more relevant vuex data loss content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • How to lose data after vuex page refresh
  • Solution to refreshing data loss when vuex stores complex parameters (such as object arrays, etc.)
  • Solution to data loss caused by vuex page refresh
  • Solution to data loss after vuex refresh
  • Four solutions to the problem of data loss when refreshing vuex pages

<<:  mysql executes sql file and reports error Error: Unknown storage engine'InnoDB' solution

>>:  Customization Method of Linux Peripheral File System

Recommend

Detailed explanation of MySQL delayed replication library method

Simply put, delayed replication is to set a fixed...

Detailed explanation of how to migrate a MySQL database to another machine

1. First find the Data file on the migration serv...

Detailed explanation of MySQL user and permission management

This article uses examples to describe the manage...

MySQL simple example of sorting Chinese characters by pinyin

If the field storing the name uses the GBK charac...

Element uses scripts to automatically build new components

Table of contents background How does element-ui&...

Use HTML and CSS to create your own warm man "Dabai"

The final result is like this, isn’t it cute… PS:...

MySQL 5.7 generated column usage example analysis

This article uses examples to illustrate the usag...

Tutorial on installing the unpacked version of mysql5.7 on CentOS 7

1. Unzip the mysql compressed package to the /usr...

HTML Table Tag Tutorial (47): Nested Tables

<br />In the page, typesetting is achieved b...

Detailed explanation of js's event loop event queue in the browser

Table of contents Preface Understanding a stack a...