Vuexモジュールを動的にロードする

Vuexは、状態管理を処理するための使いやすくパフォーマンスの高いソリューションです。 大規模なVue.jsアプリケーションを簡単に管理でき、ストアを公開することで状態を変更する予測可能な方法を保証します。

Vuexについてはすでにご存知かもしれませんが、知らない場合は、JoshuaBemenderferからすばらしい紹介が提供されました。

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

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

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

通常、大規模なアプリケーションには複数のモジュールがあります。 それらはすべて、独自のファイルで静的に定義され、呼び出し時に結合されます new Vuex.Store. それはあなたが事実上すべての場合にすべきことです。

ただし、Vuexモジュールをアプリに動的にロードして、その時点で現在のストアを拡張したいという非常に特殊なケースが考えられます。

非常に特殊なケース、たとえば、あなたは言いますか？ Vuexに依存する外部コンポーネントライブラリを作成することもできます。

同じことが、いくつかの内部パッケージに分割されたアプリケーションにも当てはまります。 各パッケージには、独自のコンポーネントとストアを含めることができます。

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

その方法を見てみましょう。

モジュールをストアに動的に追加する

通常のVuex設定のアプリがあれば、Notificationsフォルダーを作成しましょう。 外部パッケージだと想像して、好きな場所に配置できます。

そこで、基本的なVuexモジュールを使用してstate.jsを追加します。

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

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

<template>
  <div>
    <p v-for="notification in notifications">
      {{notification}}
    </p>
    <button @click="addHey">Add Hey!</button>
  </div>
</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ストアは、さまざまなモジュールを介して静的に編成されます。 そうあるべきです。 ただし、非常に特殊なケースでは、ストアを拡張してモジュールを自分で追加する必要がある場合があります。

この記事の動作デモとコードは、このコードサンドボックスで確認できます。

涼しくしてください🦄