localStorageを使用してデータを格納するローカルストレージ

新規プロジェクト（記事を参照してくださいどのように新しいプロジェクトを知らない:? ヴューのVUE-CLI3構築プロジェクト）

ディレクトリ構造

インタフェースの表示

store.jsを追加

エクスポートデフォルト{ 
　　フェッチ：（キー）=> JSON.parse（window.localStorage.getItem（キー））、
　　保存（データ、鍵）=> window.localStorage.setItem（キー、JSON.stringify（データ））
} ;

2つのlocalStorageエクスポート操作のうちの機能。
使用時には、インポートする必要が来ました。

コーディングApp.vue

HTML

<テンプレート> 
	の<divのid = "アプリ"> 
		<DIV CLASS = "ラップ"> 
			の<input type = "text" Vモデル= "キーワード" @ keydown.enter = "は、addData" /> 
			<ulのV-IF =」 list.length "> 
				<LI 
					= V-のための"リストの中（項目、インデックス）」
					：キー= "インデックス" 
					@クリック= "changeState（インデックス）" 
					：クラス= "{完全：item.state}" 
				> {{ item.txt}} </ LI> 
			</ UL> 
		</ div> 
	</ div> 
</テンプレート>

脚本

"./common/store"からインポートストア; //ストアモジュール組み込む

のconst STORAGE_KEY = "マイキー"; 

エクスポート{デフォルト
	名： "アプリケーション"、
	データ（）{ 
		リターン{ 
			キーワード： ""、
			リスト：store.fetch ？（STORAGE_KEY）store.fetch（STORAGE_KEY） ：[]、// ローカルストアからのデータ
		;} 
	}、
	コンポーネント：{}、
	マウント（）{}、
	メソッド：{ 
		//データを追加
		は、addData（）{ 
			この。 list.push（{ 
				TXT：this.keyword、
				状態：falseに、
			}）; 
			this.keyword = ""; 
		} 
		//変更状態クリックした後
		ChangeState（インデックス）{ 
			This.List [インデックス] = .STATEこの！リスト[インデックス] .STATE; 
		} 
	}、
	見る： {
		//ここで、それらはローカルに保存されたときにデータを変更する必要を回避するたびに全体のデータリストの変化を監視
		リスト：{ 
			ハンドラ（）{ 
				store.save（This.List、STORAGE_KEY）; //ローカルメモリに書き込まを
			}、
			ディープ。真後、// falseにスイッチは、結果ではなく、トリガーの時計を見てリフレッシュし、トグル状態をクリックしてください。
		} 
	} 
}。

CSS

* {マージン：0;パディング：0;} 
.wrap {幅：80％;マージン：0自動;} 
入力{高さ：30px;幅：100％;} 
のLi { 
	高さ：30px; 
	行の高さ：30px; 
	背景：＃e2e2e2。
	マージン：4PX 0; 
	カーソル：ポインタ; 
	リストスタイルのタイプ：なし。
	パディング：0 10pxの; 
} 
li.complete {背景：＃5cce5c;色：#FFF;}