Vue は Vuex を動的にロードします

                                                       

Vuex は、状態管理を処理するための高性能ソリューションです。これにより、大規模な Vue.js の管理が容易になり、ストアを公開することで状態を予測可能になります。

Vuex については、おそらくすでにご存じかと思いますが、そうでない場合でも、Joshua Bemenderfer が以下で Vuex について素晴らしい紹介をしてくれています。

Vuex ストア モジュールは次のように定義できます:

const dogs = {
  state: {
    data: []
  },
  mutations: {
    addDog(state, dog) {
      state.data.push(dog)
    }
  }
}

const store = new Vuex.Store({
  modules: {
    dogs
  }
});

通常、大規模なアプリケーションには多くのモジュールがあり、すべてのモジュールは独自のファイルで定義され、new Vuex を呼び出すことによって渡されます。組み合わせた場合はを保管してください。これは通常の処理方法でもあります。

ただし、Vuex モジュールをアプリケーションに動的にロードして、現在のストアに拡張する必要がある特殊な場合もあります。

より具体的な例は、Vuex に依存する外部コンポーネント ライブラリを作成することです。

同じことが、複数の内部パッケージに分割されたアプリケーションにも当てはまります。各パッケージには独自のコンポーネントとストレージが含まれる場合があります。

通常、これはアプリケーション内の一般的な再利用可能なモジュールです。たとえば、notifications モジュールはいくつかの通知コンポーネントを提供し、store モジュールはアプリケーション ストレージを拡張するため、アプリケーション アクセスのどこにでも新しいモジュールを追加できます。

実装方法を見てみましょう。

モジュールをストレージに動的に追加します

Vuex の一般設定を使用するため、次に notifications フォルダーを作成します。どこにでもあり、周辺機器の拡張であると想像してください。

このフォルダーに Vuex モジュールとして新しい state.js ファイルを作成します:

export default {
  state: [],
  mutations: {
    addNotification(state, notification) {
      state.push(notification);
    }
  }
};

次に、Notifications.vue ファイルを作成してインポートします。 。次に、ステータスを取得する Vuex ストアがあると仮定して、$store インスタンス変数にアクセスし、addNotification:

<template>
  <p>
    <p v-for="notification in notifications">
      {{notification}}
    </p>
    <button @click="addHey">Add Hey!</button>
  </p>
</template>

<script>
import state from "./state";

export default {
  computed: {
    notifications() {
      return this.$store.state.notifications;
    }
  },
  methods: {
    addHey() {
      this.$store.commit("addNotification", "Hey!");
    }
  }
};
</script>

を送信します。の場合、Vuex モジュールはコンポーネントの使用時に通知を自動的に追加します。こうすることで、外部アプリケーションがコンポーネントを使用する場合、そのコンポーネントはパッケージ化され、アプリケーションはコンポーネントを直接追加する必要がないため、created フックを使用できます。

そして、Vuex モジュールを動的に追加するために、ストアのインスタンス プロパティ $store.registerModule:

import state from "./state";

export default {
  // ...
  created() {
    this.$store.registerModule("notifications", state);
  }
};

Notifications# を使用するときに、 ## コンポーネントの場合、モジュールは自動的に登録されます。

まとめ

大規模アプリケーションの Vuex ストレージは、さまざまなモジュールを通じて静的に編成されます。このようになるはずです。ただし、非常に特殊なケースでは、ストレージを拡張してモジュールを自分で追加する必要がある場合があります。

推奨チュートリアル: 「

JS チュートリアル 」

以上がVue は Vuex を動的にロードしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。