Vue动态加载Vuex的方法-创新互联

这篇文章将为大家详细讲解有关Vue动态加载Vuex的方法，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

成都创新互联公司凭借在网站建设、网站推广领域领先的技术能力和多年的行业经验，为客户提供超值的营销型网站建设服务，我们始终认为：好的营销型网站就是好的业务员。我们已成功为企业单位、个人等客户提供了成都网站制作、成都网站建设、外贸营销网站建设服务，以良好的商业信誉，完善的服务及深厚的技术力量处于同行领先地位。

Vuex 是用来处理状态管理的高性能解决方案。它使管理大型 Vue.js 变得更轻松，并通过暴露出来的 store 使得状态变得可预测。

你可能已经知道 Vuex，如果不是的话 Joshua Bemenderfer 在下面为我们很好的介绍它。

你可以像下面这样定义 Vuex store 模块：

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

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

通常一个大型应用都会有很多个模块，所有模块都定义在自己的文件中，并通过调用 new Vuex.Store 时结合在一起。这也是你一般的处理方法。

但可能会有一个特殊情况，你需要将 Vuex 模块动态地加载到你的应用程序中，从而扩展到当前的 store 中。

一个比较具体的例子就是编写一个依赖于 Vuex 的外部组件库。

这同样适用于分为几个内部软件包的应用程序。每个包，可能有自己的组件和储存。

通常，在应用程序中这是常见的可重用的模块。例如，一个 notifications 模块提供一些通知组件以及一个 store 模块扩展你的应用程序存储，这样在你的应用程序中添加一个新的模块在任何一个地方都可以访问。

让我们一起来看看它是怎样实现的吧。

动态为存储新增模块

因为我们使用了 Vuex 的一般设置，接下来我们创建一个 notifications 文件夹，你可以放在任意位置，想象他是一个外设的扩展。

在此文件夹下新建 state.js 文件作为我们的 Vuex 模块:

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

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

现在，我们的想法是，当使用组件时， Vuex 模块会自动添加通知。这样，如果外部应用程序使用组件，它将会被打包进来，而应用程序无需关心直接添加它，所以我们可以使用 created 钩子。

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

import state from "./state";

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

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

包起来

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

上文描述的就是Vue动态加载Vuex的方法，具体使用情况还需要大家自己动手实验使用过才能领会。如果想了解更多相关内容，欢迎关注创新互联成都网站设计公司行业资讯频道！

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

当前文章：Vue动态加载Vuex的方法-创新互联
分享网址：http://cdiso.cn/article/ihhje.html

Vue动态加载Vuex的方法-创新互联

动态为存储新增模块

包起来

其他资讯