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

Vue.js implements image switching function

This article shares the specific code of Vue.js t...

Some tips on deep optimization to improve website access speed

<br />The website access speed can directly ...

CentOS 7.9 installation and configuration process of zabbix5.0.14

Table of contents 1. Basic environment configurat...

How to visualize sketched charts in Vue.js using RoughViz

introduce A chart is a graphical representation o...

The whole process record of vue3 recursive component encapsulation

Table of contents Preface 1. Recursive components...

Vue + OpenLayers Quick Start Tutorial

Openlayers is a modular, high-performance and fea...

Docker network principles and detailed analysis of custom networks

Docker virtualizes a bridge on the host machine. ...

jQuery Ajax chatbot implementation case study

Chatbots can save a lot of manual work and can be...

Detailed explanation of .bash_profile file in Linux system

Table of contents 1. Environment variable $PATH: ...

7 native JS error types you should know

Table of contents Overview 1. RangeError 2. Refer...