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

    本番環境下でiphonexをデバッグする 白い画面

    iphonexや他のモデルの問題に直面して、バージョンのリリース後に毎回、白い画面となり、アプリの再エントリが使用されていない閉じて、アプリをアンインストールすると、以下の通常の後に再インストールされたログエラーメッセージを開くには、本番環境です WebpackのsourceMapデバッグ1を開き、ルーティングの変更は、ハッシュモードになります

    Nov 20, 2020 · 2 min read

    vueのurlフェッチ

    Nov 19, 2020 · 1 min read

    RBACユーザーロール権限設計

    Nov 19, 2020 · 4 min read

    ファイル管理

    Nov 18, 2020 · 3 min read

    JavaScriptのデータ型

    Nov 18, 2020 · 3 min read