Data loss problem in vuex page refresh

When the page is refreshed, vuex will initialize the state so that some values ​​in vuex will be lost. Encountered such problems, we generally need to cooperate with local storage to achieve data persistence. (We use localStorage as an example, you can also use sessionStorage, cookie)

1. Cooperate with local storage

When logging in, you need to save the user name and token. Generally, save a copy in vuex and locally

//拿到数据之后存储在 vuex 和 本地
localStorage.setItem('name', name);
this.$store.dispatch('token', token);

//清空数据时，分别清空 vuex 和 本地
localStorage.removeItem('name');
this.$store.dispatch('token', '');

//state.js 里面
name: localStorage.getItem('name') ? localStorage.getItem('name') : '',
token: localStorage.getItem('token') ? localStorage.getItem('token') : ''

This can well realize the persistence of vuex data, but every time the data is retrieved and cleared, you need to write two, which is very troublesome! We can also use plug-ins to help us achieve.

2. Plug-in vuex-persistedstate

The principle of the vuex-persistedstate plug-in is to store the state of vuex in localStorage or sessionStorage or a cookie.
Install:

npm install vuex-persistedstate  --save

Introduced in the store's index.js:

import persistedState from "vuex-persistedstate";
export default new Vuex.Store({
    
    
	state,
	actions,
	mutations,
	plugins: [persistedState({
    
    
		storage: window.sessionStorage, // 指定数据存储的位置，默认是localStorage 
		reducer(val) {
    
     // 存储指定state
	       return {
    
     // val 是state
			  name:val.name,
	          token:val.token
	       }
	    }
  	})]
})

You can also create a new plug-in instance, and then import it into the plugins object of the vuex file.

import persistedState from "vuex-persistedstate";
const persisted = persistedState({
    
    
	storage: window.sessionStorage, // 指定数据存储的位置，默认是localStorage 
	paths:['name','token']
})
export default new Vuex.Store({
    
    
	state,
	actions,
	mutations,
	plugins: [persisted]
})

Use cookies

import persistedState from "vuex-persistedstate";
import * as Cookies from 'js-cookie'
export default new Vuex.Store({
    
    
	state,
	actions,
	mutations,
	plugins: [persistedState({
    
    
		storage: {
    
    
			getItem: (key) => Cookies.get(key),
			setItem: (key,value) => Cookies.set(key,value,{
    
    expires: 8}),
			removeItem: (key) => Cookies.remove(key)
		}
  	})]
})

3. Plugin vuex-along

vuex-along has the same effect as the above plug-in
installation:

npm install vuex-along --save

Introduced in the store's index.js:

import vuexAlong from 'vuex-along';
export default new Vuex.Store({
    
    
	state,
	actions,
	mutations,
	plugins: [vuexAlong ({
    
    
		name:'along', // 设置本地数据集合的名字，默认为 vuex-along
		local: {
    
    
			list:['name','token'], // 是否存放在local中  false 不存放 如果存放按照下面session的配置配
			isFilter:true // 过滤 list 中的字段而非保存
		},
		session:false //是否存放在 session 中  false 是不存放
  	})]
})