vuex でアイドル状態のリセットを実装する方法

この記事では主に vuex のアイドル状態のリセット ソリューションを紹介し、参考として提供します。

はじめに

大規模な単一ページのアプリケーション (以下、spa と呼びます) では、コンポーネント間の状態共有や状態転送などの問題を解決するために、状態マネージャー vuex をよく使用します。この種のアプリケーションは、数十の単一ページから数百の単一ページまで及ぶことがあります。ルートの切り替えが頻繁に行われると、各ルートに対応する vuex の状態がますます増えます。ページの究極の最適化を達成するには、これらのアイドル状態をリセットして、占有されるメモリ空間を減らす必要があります。

どのステータスをリセットできるか

vuex は、アプリケーションのすべてのコンポーネントのステータスを管理するために集中ストレージの使用を強調していますが、実際にすべてのステータスをストアに入れて処理すると、開発が非常に簡単になることがわかります。痛い。管理のためにストアにどのデータを入れる必要があるかを適切に制御したい場合は、まず vuex がどのような問題を解決するために使用されるかを理解する必要があります。 vuex の公式 Web サイトでは、複数のコンポーネントの状態共有の問題を解決するためであると指摘されており、これにより、複数のコンポーネントの共有状態をストアに入れて管理できるようになります。 -ページアプリケーション。ストアが複数のコンポーネントによって共有される状態のみを保存する場合、これらの状態はいつでも使用されるため、vuex で状態をクリーンアップする必要はありません。

ビジネス シナリオがますます複雑になるにつれて、バックグラウンドと対話するための多くのロジックもコンポーネントに配置されるため、コードが非常に煩雑になり、vuex が十分に活用されなくなります。この時、バックエンドAPIとのやりとりのロジックをvuexのアクションに組み込んで処理することができ、バックエンドから返されるステータスが自然とストア管理に落とし込まれることになります。この処理の後、コンポーネントはデータのレンダリングのみを担当し、ロジックは非常に明確です。現時点では、ルーティング スイッチとしてコンポーネントに対応するストア内の状態がますます多くなり、これらの状態を手動でクリーンアップする必要があります。

多くのソリューションにはトレードオフがあります。バックグラウンド API と対話するデータをコンポーネントに配置すると、データをクリーンアップする必要はありませんが、コード ロジックが乱雑になります。さらに、vuex などのプラグイン vue-devtools は、各リクエスト データの変更を監視できなくなります...

状態をいつリセットするか

私たちが望む効果は、前のルートに対応することですルートが切り替わると、vuex のステータスはリセットされますが、ルーティングと vuex の間には 1 対 1 の対応関係はありません。この効果を実現したい場合は、ルーティング モジュールと vuex モジュールの間の対応を維持する必要があります。非常に面倒になります。ルートが変更された場合は、vuex 内のすべての状態をリセットすることをお勧めします。

vuex でアイドル状態をクリアする方法

以下は、私の github の例と組み合わせて説明します。この例では、ルートを切り替えるときにアイドル状態をクリアします。

ルートに対応するコンポーネントのモジュールステータスを変換する

例では、ストアを複数のモジュールに分割し、ルートに対応するコンポーネントのステータスを対応するモジュールに配置し、複数でステータスを共有しますコンポーネントは最上位のストア管理に配置されます。それはおおよそ次のとおりです:

// store/index.js
import page1 from "./modules/page1.js";
import page2 from "./modules/page2.js";
import page3 from "./modules/page3.js";
import page4 from "./modules/page4.js";
import page5 from "./modules/page5.js";

export default new Vuex.Store({
  state,
  getters,
  actions,
  mutations,
  modules: { // 每个路由对应的 module
    page1,
    page2,
    page3,
    page4,
    page5
  },
  plugins: __DEV__ ? [createLogger()] : [],
  strict: __DEV__ ? true : false
});

ルート page1 に対応するモジュールの状態は次の形式になります:

// store/modules/page1.js
const state = {
   // 列表数据
   page1Data: [],
   // 标题数据
   page1Title: ''
}

これらのデータはバックエンド API を呼び出すことによって返され、コピーされます。ルートが変更されたときにこれらのデータをリセットすると、初期化データを抽出し、リセットする必要がある識別メソッド initState() を公開する必要があります。これは、ルートが変更されたときにリセットする必要があることを意味します。 もちろん、このメソッドの名前は規則であり、これを使用することもできます。別の名前として定義します。変換後:

// store/modules/page1.js
// 放置你要重置的数据
const initState = {
  page1Data: [],
}

// state
const state = {
  // 参数解构
  ...initState,

  // 路由改变不想重置的数据
  page1Title: '',
  initState(){
    return initState
  }
}

グローバルモジュール構成

グローバルミューテーションイベントタイプを定義

// store/types.js
export const RESET_STATES = 'resetStates'

グローバルミューテーションを定義

// store/mutation.js

import * as types from './types'

// 检测所有的 state 并把 `initState()` 中的属性重置
function resetState(state, moduleState) {

  const mState = state[moduleState];

  if (mState.initState && typeof mState.initState === 'function') {

    const initState = mState.initState();

    for (const key in initState) {

      mState[key] = initState[key];
    }
  }

}

export default {

  [types.RESET_STATES](state, payload) {

    for (const moduleState in state) {

      resetState(state, moduleState);
    }
  },

}

グローバルアクションを定義

// store/action.js
import * as types from './types'

export default {
  // rest state action
  resetStates:function (context, payLoad) {

    context.commit(types.RESET_STATES, payLoad);
  }
}

ルートスイッチングトリガーリセットメソッド

これですべての準備が整いました。ルートが変更されたときにリセットをトリガーします。これはエントリ vue ファイルで処理されます

// components/app.vue
<script>
  import {mapState, mapActions} from "vuex"
  export default{

    methods: {

      ...mapActions({
        resetStates: "resetStates"
      })
    },

    watch: {

      $route(to, from) {
        // 路由改变发起重置
        this.resetStates();
      }
    }
  }
</script>

Chrome ブラウザーに vuejs-devtools がインストールされている場合は、ルートを切り替えるときに以前のルート データを明確に確認できます。

概要

例についてはここをクリックしてください。ここでの vuex 状態のリセットは、ルートが切り替わるたびにすべてのストアの状態をトラバースし、initState() でプロパティをリセットすることです。現在のルートに対応する状態をリセットできれば良いのですが、関係はありません。ストア内のルーティングとモジュールの間。これは vuex 状態をリセットするための単なる解決策です。より良い解決策がある場合は、メッセージを残してください。不適切な内容がありましたら、お気軽にコメントを残してください。

上記は私があなたのためにまとめたものです。

関連記事:

vueでAliフォントアイコンを参照する方法

Expressでのlog4jsの実際の使い方について

NodeJSを使ったWebSocket機能の実装方法

以上がvuex でアイドル状態のリセットを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。