动态加载 Vuex 模块

翻译 科大大 ⋅ 于 1周前 ⋅ 103 阅读 ⋅ 原文地址
这是一篇协同翻译的文章,目前翻译进度为 43%,你可以点击『我来翻译』按钮来 参与翻译

1

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
  }
});
科大大 翻译于 1周前

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

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

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

科大大 翻译于 1周前

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.

动态为存储新增模块

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

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

export default {
  state: [],
  mutations: {
    addNotification(state, notification) {
      state.push(notification);
    }
  }
};
Summer 翻译于 1周前

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:

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

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

import state from "./state";

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

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

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.

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

原文地址:https://alligator.io/vuejs/vuex-dynamic-...

译文地址:https://vuejscaff.com/topics/87/dynamic-...


本文中的所有译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。

成为第一个点赞的人吧 :bowtie:
回复数量: 0
    暂无评论~~
    您需要登陆以后才能留下评论!

    Vue.js 官方中文文档

    前端开发环境部署