序文: 状態管理に関して言えば、 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は私がとても気に入っているデータベースです。今日はWindows 8システムでインストール...
この記事では、ブルーグリーン デプロイメントと、nginx を使用してブルーグリーン デプロイメント...
目次序文-リンクカスタムネットワーク質問する序文前回は、 -Linkパラメータを使用してコンテナ間の...
目次環境の準備環境の準備mariadbをアンインストールする rpm -qa | grep mari...
int(1) の長さ 1 は、許可されたストレージ幅を表していないことはすでにご存知かもしれません...
Linux では、ハードディスクの追加やパーティションの再マウントといった状況に頻繁に遭遇します。こ...
目次1. 部分文字列() 2. サブストラクチャ() 3.インデックス() 4.最後のインデックス(...
Nginx は、リバース プロキシ機能を使用して負荷分散を実装できるほか、フォワード プロキシ機能を...
目次最初に要約: 🌲🌲 序文: 🍬🍬公開🍬🍬 🍬🍬グローバル🍬🍬 🍬🍬ボールボックス🍬🍬 🎉🎉🎉結論...
表では、左上の境界線の色を個別に定義したり、セルの右下の境界線の色を定義したりできます。これら 2 ...
最初の解決策は、イメージを公開イメージリポジトリにプッシュし、それをプルダウンすることです。 2 番...
目次1. グローバルレベル2. データベースレベル3. 表面レベル4. 列レベルの権限5. サブルー...
序文前回の記事では、JavaScript の 2 つのデータ型、基本型と参照型、および参照型の浅いコ...
1. VMware vSphere 導入の早期計画のポイント1. vSphereの利点(わずかに)...
目次1. 再出発1.1. ストア(司書) 1.2. 状態(書籍) 1.3. アクション(図書貸出リス...