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!