Vuex 是一种易于使用且高性能的解决方案来处理状态管理。它使管理大型 Vue.js 应用程序变得轻而易举，并确保通过公开存储来改变状态的可预测方式。

你可能已经知道 Vuex，但如果你不知道 Joshua Bemenderfer 给了我们一个很好的介绍。

你可以在你的 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 的外部组件库。

这同样适用于分成几个内部包的应用程序。每个包，可以有自己的组件和商店。

通常，这是应用程序之间常见的可重用模块的情况。例如，一个提供一些通知组件的通知模块和一个扩展您的应用程序商店的商店模块，添加一个可以从您的应用程序中的任何地方访问的新模块。

让我们看看如何做到这一点。

动态添加模块到商店

给定一个具有常规 Vuex 设置的应用程序，让我们创建一个通知文件夹。你可以把它放在任何你喜欢的地方，想象一下它是一个外部包。

在那里，加state.js一个基本Vuex模块：

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);
  }
};

现在该模块将在使用通知组件时注册。

包起来

大型应用程序中的 Vuex 存储通过不同的模块静态组织。应该是这样。但在非常特殊的情况下，您可能需要扩展商店并自己添加模块。

您可以在此 Codesandbox 中查看本文的工作演示和代码

保持凉爽🦄