vuexリフレッシュデータ消失問題を解決します。

前言
vueで構築された1ページの大型プロジェクトでは、Vuexが使用される可能性があります。Vuexの状態格納は応答的であり、Vueコンポーネントがstoreから状態を読み取るとき、storeの状態が変化すると、対応するコンポーネントもそれに応じて効率的に更新される。
しかし、問題があります。vuexの格納されているデータはページの中だけで、私たちが定義したグローバル変数に相当します。リフレッシュしたら、中のデータは初期化状態に戻ります。しかし、この状況は私たちが望むものではない場合があります。
例えば、ユーザーはもう登録しました。登録状態をstateに入れました。ページを更新したら、また再登録しますか？ショッピングカートに追加されたデータは、更新するとまた追加されますか？
解決策:
モニターページが更新されているかどうかは、ページが更新されたら、session Strage/local Storrageにstateオブジェクトを保存します。
ページが開いたら、session Strage/local Storrageにstateオブジェクトが存在するかどうかを判断し、存在すれば、ページがリフレッシュされたと説明し、session Storrage/local Strageに保存されているデータをvuexのstate割り当てに取り出します。
存在しない場合、説明は初めて開くと、vuexで定義されているstateの初期値を取る。
session Strageとlocastrageを紹介します。
H 5は私たちがよく使うlocal Strageとsession Strageを提供します。
両者の違い：local Strageライフサイクルは永久であり、これはユーザがブラウザから提供されたUI上でlocal Strage情報をクリアしない限り、これらの情報は永遠に存在することを意味する。
保存データのサイズは一般的に5 MBで、クライアント（つまりブラウザ）のみで保存され、サーバとの通信には参加しません。session Storrageは現在のセッションのみ有効で、ページまたはブラウザを閉じてクリアされます。
保存データのサイズは一般的に5 MBで、クライアント（つまりブラウザ）のみで保存され、サーバとの通信には参加しません。
ソースインターフェースは受け入れられます。ObjectとArayに対してより良いサポートがあります。ブラウザのサポートは、IE 7および以下がサポートされていないほか、他の標準ブラウザはすべて完全にサポートされています（ieおよびFFはウェブサーバで実行されます）。

local Strageとsession Storrageは同じ操作方法を持っています。例えば、setItem、getItem、removeItem、clearなどです。
コード:
プロジェクトディレクトリ構造:

プロジェクトの入り口ページにリスニングリフレッシュイベントを追加します。

name: 'App',
 mounted () {
 window.addEventListener('unload', this.saveState)
 },
 methods: {
 saveState () {
  sessionStorage.setItem('state', JSON.stringify(this.$store.state))
 }
 }

storeには機密情報が格納されている可能性がありますので、ずっとsession Strageに置いているのはあまり良くないです。ページの読み込みが完了したら、クリアまたは指定されたsessionを削除します。

 window.addEventListener("load", () => {
  sessionStorage.clear();
 });

state.js:

var state = sessionStorage.getItem('state') ? JSON.parse(sessionStorage.getItem('state')) : {
 count: 1,
 obj: {},
 arr: [1, 2, 3]
}
export default state

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import state from './states'
import mutations from './mutations'
import getters from './getters'
import actions from './actions'
Vue.use(Vuex)
export default new Vuex.Store({
 state,
 mutations,
 getters,
 actions
})

muttions.js:

import {
 SOME_MUTATION
} from './mutation-types.js'
 
export default {
 [SOME_MUTATION] (state) {
 state.count++
 }
}

muttionn-types.js
export const SOME_MUTTION='SOME_MUTTION
知識を補充します：vuex-alongは効果的にページを更新した後にvuex中のデータがリセットすることを防止します。
1.vuex-alongのインストール
npm i vuex-along--save
2.storeディレクトリのindex.jsファイルに導入する
2.1
import{createVuexAlong}from'vuex-along'
2.2直接上図

その意味を簡単に説明します。
name:“”“”
//ここに預けたのはlocastorgeで、locastorgeのキーの値を表しています。
local:{list:[[userInfo]，isfilter:true]
//list：フィルタするvuexのデータ、isFilter代表はuserInfoをフィルタし、残りはlocastorgeに保存します。
session:false
//sessionstouceに対しては一切操作しない
より詳細な情報は、githbによって理解される：https://github.com/boenfu/vuex-along
3.以上のこの解決はvuexリフレッシュデータの消失問題です。小編が皆さんに共有している内容の全部です。将来のオーディエンスの皆さんに役に立ちたいです。私たちを応援してください。