序文: 状態管理に関して言えば、 1. フロントエンドの状態管理とは何ですか?たとえば、図書館の利用者は誰でも自由に図書館に出入りして、本を借りたり返却したりできます。人数が少ない場合は、この方法により効率が向上し、手順の数を減らすことができます。しかし、人数が多くなると、混乱が生じやすく、本の所在が不明瞭になったり、紛失したりすることがあります。したがって、本の貸出を具体的に記録する司書が必要であり、つまり、本の貸出と返却を司書に委託する必要があります。 実際、ほとんどの状態管理ソリューションは上記のアイデアに基づいており、管理者(Vuexなど)を使用して図書館の本の貸出と返却(プロジェクトに保存する必要があるデータ)を管理しています。 2. ヴュークス国内のビジネス利用では 定数状態 = { 本: 0 } const 変異 = { 借りる本(状態) { 状態.book++ } } //store.commit('borrow_book') を呼び出すとき
実際、私は Vuex を使って、関連する使用法を簡単に紹介しているだけです。誰もが Vuex をよく知っているはずです。では、Vuex はどのような問題を解決するのでしょうか?
実際、ほとんどのプログラマーは(まったく)怠け者で、複数のコンポーネント間で状態を共有することだけを望んでおり、他のすべては後付けです。最も典型的な例は、ショッピングカートに追加されたアイテムの数です。 1 つのアイテムが追加されると、最終的な合計が Vuex レコードを通じて保存され、下の列に表示されます。 ここで疑問になるのは、目的が複数の状態を共有することだけであるのに、なぜ 3. バス
実際、Bus は非常に軽量です。Dom 構造はなく、 Vue.prototype.$Bus = 新しいVue() 次に、 //イベントを送信します this.$Bus.$emit('borrow_book', 1) // どのコンポーネントでも受信 this.$Bus.$on('borrow_book', (book) => { console.log(`${book} の本を借りました`) }) もちろん、 どうですか?上記は、状態を共有する上で Vuex よりもはるかに簡単ですか?実際、はるかにシンプルですが、これは中小規模のプロジェクトに適していることも意味します。大規模なプロジェクトの場合、 その動作原理は、パブリッシュとサブスクライブという考え方です。非常にエレガントでシンプルですが、 クラスバス{ コンストラクタ() { // サブスクリプション情報を収集し、センターに発送します。this.list = {}; } // Subscribe$on(name, fn) { this.list[名前] = this.list[名前] || []; this.list[名前].push(fn); } // 公開 $emit(name, data) { if (this.list[名前]) { this.list[name].forEach((fn) => { fn(データ); }); } } // 購読解除 $off(name) { if (this.list[名前]) { this.list[名前]を削除します。 } } } デフォルトのバスをエクスポートします。 簡単ですよね? 4. ウェブストレージ実際、この点に関しては、 Web ストレージには、 これら 3 つのいずれの場合も、機密情報を入れないことを強くお勧めします。暗号化するか、重要度の低いデータを入れるようにしてください。 次の 3 つを簡単に確認してみましょう。 cookie については、あまり説明する必要はありません。リクエストを行う際、個人データなどをリクエストするためにcokie が使用されることがよくありますが、これはここで説明する内容とはあまり関係がありません。
要約: どのソリューションを選択する場合でも、プロジェクトに適したものを選択するのがベストプラクティスです。最善の解決策というものは存在せず、自分に合った解決策があるだけです。 フロントエンドステータス管理に関するこの記事はこれで終わりです。フロントエンドステータス管理に関するその他のコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
>>: Nginx をベースに特定の IP への短期アクセス数を制限する
問題: MySQL がデータ ファイルを保存するパーティションの容量が小さく、現在いっぱいになってい...
最近、あるプロジェクトに取り組んでいたとき、自分のプロジェクトでは CSS3 のアニメーション技術を...
目次1. マルチインスタンスとは2. 複数インスタンスのインストールの準備3. MYSQLの複数イン...
目次MySQLマスタースレーブの基本原理3つのbinlog形式の比較混合形式のバイナリログが存在する...
JS には、文字列をインターセプトするための 3 つのメソッド、 slice() 、 substri...
ダウンロードダウンロードアドレス: https://dev.mysql.com/downloads/...
注: Web 開発では、フォームに autocomplete="off" を追加...
Web ページ制作では、input と img が同じ行に配置されることが多く、img タグが常に ...
1. MySQL jdbc ドライバー (mysql-connector-java-5.1.28.j...
目次準備展開プロセスRocketMQ の初体験関連する質問ヘルプドキュメント私は最近 RocketM...
目次forEach() メソッドjs の Array.forEach のループから抜け出す方法解決:...
方法 1: readonly 属性を true に設定します。入力値=読み取り専用 readOnly...
この間、プロジェクトに取り組んでいるときに、データ間の接続が非常に複雑なモジュールに遭遇しました。テ...
OpenSSL を使用して SSL キーと CSR ファイルを生成するHTTPS を設定するには、秘...
序文docker イメージを削除できません。docker docker imagesを確認すると、イ...