uniapp での Vuex データの永続化

質問

H5 アプリケーションの Vuex に保存されているデータは、ページを更新した後に失われます。

理由

Vuex のストアのデータは実行中のメモリに保存されます. ページが更新されると、ページは Vue インスタンスをリロードし、Vuex データは再初期化されるため、ページが更新されると Vuex のデータが失われます.

解決

vuex-persistedstateプラグインを使用する

1. プロジェクト ディレクトリで実行: npm install --save vuex-persistedstate;
2. store/index.js を変更

import Vue from 'vue'
import Vuex from 'vuex'
import persistedState from "vuex-persistedstate"

Vue.use(Vuex)

const store = new Vuex.Store({
    
    
	plugins: [
		persistedState({
    
    
			storage: {
    
    
				getItem: key => uni.getStorageSync(key),
				setItem: (key, value) => uni.setStorageSync(key, value),
				removeItem: key => uni.removeStorageSync(key)
			}
		})
	],
	state:{
    
    //存放状态
        "username":'',
        "userid":''
    },
	mutations:{
    
    
		//...
	},
	actions:{
    
    
		//...
	},
	//...
})

export default store

使用後、ブラウザーを開き、コンソール デバッグを使用して、データがwindow.localStorage.vuex
に保存さ数据缓存APIれていることを確認します。 .io/api/ストレージ/ストレージ.html

注: APP-PLUS 環境では、このデータはデフォルトではアプリケーションの終了時にクリア (または初期化) されません。