动态加载Vuex模块

Vuex is an easy to use and performant solution to handle state management. It makes it a breeze to manage large-scale Vue.js applications and ensures a predictable way to mutate the state by exposing a store.

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

You may already know about Vuex, but if you don’t Joshua Bemenderfer gave us a great introduction.

您可能已经了解Vuex，但是如果您不了解Vuex，Joshua Bemenderfer会给我们提供很好的介绍 。

You can define modules in your Vuex store as follows:

您可以在Vuex存储中定义模块，如下所示：

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

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

Usually a large application has several modules. All of them are defined statically in their own file, and combined together when calling new Vuex.Store. That’s what you should do in practically all cases.

通常，大型应用程序具有多个模块。 所有它们都在自己的文件中静态定义，并在调用new Vuex.Store时组合在一起。 在几乎所有情况下，这都是您应该做的。

But there could be a very specific case where you’d want to load a Vuex module dynamically into your app, extending the current store at that point.

但是在特定情况下，您可能希望将Vuex模块动态加载到应用中，从而扩展当前存储。

A very specific case, like what, you say? One could be writing an external component library that depends on Vuex.

一个非常具体的案例，例如，您说什么？ 一种可能是编写依赖Vuex的外部组件库。

The same could apply in an applications divided into several internal packages. Each package, could have their own components and stores.

分为几个内部程序包的应用程序中也可以使用同样的方法。 每个包装可以有自己的组件和存储。

Usually, this is the case for common reusable modules among apps. For example, a notifications module that provides some notification components and a store module that extends your application store, adding a new module that’s accessible from everywhere in your app.

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

Let’s see how to do that.

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

动态地将模块添加到商店 (Add a Module Dynamically to the Store)

Given an app with an usual Vuex setup, let’s create a notifications folder. You can place it wherever you’d like, just imagine it’s an external package.

给定具有常规Vuex设置的应用程序，让我们创建一个notifications文件夹。 您可以将其放置在任意位置，只需想象它是一个外部包装即可。

In there, add a state.js with a basic Vuex module:

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

notifications/state.js

notifications / state.js

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

Then create a Notifications.vue file where you import it. You’ll then access the $store instance variable, assuming that there’s a Vuex store for getting the state and committing an addNotification:

然后在导入文件的位置创建一个Notifications.vue文件。 然后，假设有一个用于获取状态并提交addNotification的Vuex存储，您将访问$store实例变量：

notifications/Notifications.vue

通知/Notifications.vue

<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>

Now, the idea is that the notifications Vuex modules adds itself when the component is used. In that way, if an external app is using the component, it all comes packaged-in already and the app doesn’t have to care about adding it directly. So, we could use the created hook for that.

现在，想法是通知 Vuex模块在使用组件时会添加自身。 这样，如果外部应用程序正在使用该组件，则所有组件都已打包在其中，并且该应用程序不必在意直接添加它。 因此，我们可以为此使用created钩子。

And, in order to dynamically add the Vuex module, we can use the store’s instance property $store.registerModule:

并且，为了动态添加Vuex模块，我们可以使用商店的实例属性$store.registerModule ：

notifications/Notifications.vue

通知/Notifications.vue

import state from "./state";

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

Now the module will be registered when the Notifications components is used.

现在，当使用Notifications组件时，将注册该模块。

结语 (Wrapping Up)

The Vuex store in large applications is organized statically through different modules. That’s how it should be. But in very specific cases, you might need to extend the store and add a module yourself.

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

You can see the working demo and code of this article in this Codesandbox

您可以在此Codesandbox中查看本文的有效演示和代码。

Stay cool 🦄

保持冷静🦄

翻译自: https://www.digitalocean.com/community/tutorials/vuejs-vuex-dynamic-modules