vuexページの更新でのデータ損失の問題

ページが更新されると、vuexは状態を初期化するため、vuexの一部の値は失われます。このような問題が発生した場合、データの永続性を実現するには、通常、ローカルストレージと連携する必要があります。（例としてlocalStorageを使用しますが、sessionStorage、cookieも使用できます）

1.ローカルストレージと連携する

ログインするときは、ユーザー名とトークンを保存する必要があります。通常、コピーをvuexとローカルに保存します。

//拿到数据之后存储在 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') : ''

これにより、vuexデータの永続性を十分に実現できますが、データを取得してクリアするたびに2つ書き込む必要があり、非常に面倒です。プラグインを使用して達成することもできます。

2.プラグインvuex-persistedstate

vuex-persistedstateプラグインの原則は、vuexの状態をlocalStorage、sessionStorage、またはcookieに保存することです。
インストール：

npm install vuex-persistedstate  --save

ストアの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
	       }
	    }
  	})]
})

新しいプラグインインスタンスを作成して、それをvuexファイルのpluginsオブジェクトにインポートすることもできます。

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]
})

クッキーを使用する

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.プラグインvuex-に沿って

vuex-alongには、上記のプラグインの
インストールと同じ効果があります。

npm install vuex-along --save

ストアの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 是不存放
  	})]
})