blog

Vuexでコンポーネント間通信を実現するには?

Vuexは一方向のデータフローを実装しており、グローバルにはStateの保存データがあり、Stateのデータを変更するコンポーネントは、Mutationを介して実行する必要があり、Mutationは同...

Nov 21, 2020 · 2 min. read
シェア

vuex

Vuexは一方向のデータフローを実装しており、グローバルにはデータを格納するStateがあり、コンポーネントがStateのデータを変更したい場合は、Mutationを介して実行する必要があります。Mutationは同時に、外部プラグインがStateデータの更新を取得するために呼び出すためのサブスクライバモデルを提供します。そして、すべての非同期操作またはバッチ同期操作は、アクションを移動する必要がありますが、アクションはまた、直接Stateを変更することはできません、またはミューテーションを介してStateデータを変更する必要がある場合。最後に、状態の変更に応じて、ビューにレンダリングします。



vuex各モジュールの機能

  • Vue Components: Vueコンポーネント。HTMLページで、ユーザーのアクションやその他のインタラクティブな動作を受け取る役割を担い、対応するアクションをトリガーして応答するディスパッチメソッドの実装。
  • ディスパッチ: アクションの振る舞いのトリガーメソッドで、アクションを実行できる唯一のメソッドです。
  • アクション:.Vue Componentsが受け取るすべてのインタラクションを処理します。同期/非同期アクションを含み、同じ名前の複数のメソッドをサポートし、登録順に順次トリガされます。バックエンドAPIから要求された操作は、他のアクションのトリガーや変異操作の送信など、このモジュールで実行されます。このモジュールは、アクショントリガーの連鎖をサポートする Promise のラッパーを提供します。
  • commit: ステート・チェンジのコミット操作メソッド。変異をコミットすることは、変異を実行する唯一の方法です。
  • mutations:.Vuex が状態を変更するための唯一の推奨メソッドです。このメソッドは同期処理しか実行できず、メソッド名はグローバルに一意でなければなりません。操作の途中には、状態を監視するためのフックなどが公開されます。
  • state: ページ状態管理コンテナオブジェクト。Vue コンポーネント内のデータオブジェクトの断片化されたデータを一元的に格納し、統一的な状態管理のためにグローバルに一意です。ページの表示に必要なデータはこのオブジェクトから読み込まれ、Vueのきめ細かなデータレスポンス機構が効率的な状態更新に使用されます。
  • getters: ステートオブジェクト読み取りメソッド。このモジュールはダイアグラムに個別に記載されておらず、レンダーに含まれているはずです。Vue Componentsはこのメソッドを通じてグローバルなステートオブジェクトを読み込みます。
  • VuexlocalStorageでは

    vuexはvueのステートマネージャで、保存されたデータはレスポンシブです。しかし、保存はされず、リフレッシュ後に初期状態に戻ります。
    let defaultCity = " 
    try { // ユーザーは、ローカル・ストレージの機能をオフにしてから、アウター・レイヤーにtryを追加する。...catch
     if (!defaultCity){
     defaultCity = JSON.parse(window.localStorage.getItem('defaultCity'))
     }
    }catch(e){}
    export default new Vuex.Store({
     state: {
     city: defaultCity
     },
     mutations: {
     changeCity(state, city) {
     state.city = city
     try {
     window.localStorage.setItem('defaultCity', JSON.stringify(state.city));
     // データが変更されたら、データをコピーしてlocalStorageに保存する。
     } catch (e) {}
     }
     }
    })
    
    ここで注意点として、vuexでは保存された状態は配列であり、localStorageは文字列しかサポートしていないため、JSONを使って変換する必要があります:

    JSON.stringify(state.subscribeList); // array -> string
    JSON.parse(window.localStorage.getItem("subscribeList")); // string -> array 
    



    Read next

    前髪画面のベストプラクティスの適応 - ブートページ、没入型小説の読書ページ

    前髪画面は、AppleのiPhone Xが最初に発売され、Android陣営の連続フォローアップが続いて、我々はすべて知っているように、Androidのモデルの断片化は、Googleの適応プログラムの正式な開始前に、非常に深刻であり、Androidの開発者は、個別に前髪画面の機器の主要メーカーに適応する必要があり、作業負荷が想像できます。

    Nov 21, 2020 · 11 min read