Vue는 Vuex를 동적으로 로드합니다.

                                                        来Vuex는 고성능 솔루션을 처리하는 데 사용됩니다. 대규모 Vue.js 관리를 더 쉽게 만들고 스토어를 노출하여 상태를 예측 가능하게 만듭니다.

당신은 아마도 이미 Vuex를 알고 있을 것입니다. 그렇지 않다면 Joshua Bemenderfer가 아래에 Vuex에 대한 좋은 소개를 제공합니다.

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에 의존하는 외부 구성 요소 라이브러리를 작성하는 것입니다.

여러 내부 패키지로 나누어진 애플리케이션에도 동일하게 적용됩니다. 각 패키지에는 자체 구성 요소와 저장소가 있을 수 있습니다. 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：

<template>
  <p>
    <p v-for="notification in notifications">
      {{notification}}
    </p>
    <button @click="addHey">Add Hey!</button>
  </p>
</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’s 的实例属性 $store.registerModule：

import state from "./state";

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

现在，当使用 Notifications

일반적으로 이는 애플리케이션에서 재사용 가능한 일반적인 모듈입니다. 예를 들어, notifications 모듈은 일부 알림 구성 요소를 제공하고 store 모듈은 애플리케이션 스토어를 확장하여 애플리케이션의 어느 위치에나 새 모듈을 추가하면 모두 액세스할 수 있습니다.

어떻게 구현되는지 살펴보겠습니다.

저장소에 동적으로 모듈 추가

Vuex의 일반 설정을 사용하기 때문에 다음으로 notifications 폴더를 생성합니다. 어디에나 배치할 수 있습니다. 주변 확장이라고 상상해 보세요.

이 폴더에 Vuex 모듈로 새 state.js 파일을 만듭니다. 🎜rrreee🎜그런 다음 Notifications.vue 파일을 만들고 가져옵니다. 그런 다음 상태를 가져올 Vuex 스토어가 있다고 가정하고 $store 인스턴스 변수에 액세스하고 addNotification을 제출합니다. 🎜rrreee🎜이제 아이디어는 다음과 같습니다. Vuex 모듈이 컴포넌트를 사용할 때 자동으로 알림을 추가할 때. 이렇게 하면 외부 애플리케이션이 구성 요소를 사용하는 경우 해당 구성 요소가 패키징되며 애플리케이션은 이를 직접 추가하는 것에 대해 걱정할 필요가 없으므로 created 후크를 사용할 수 있습니다. 🎜🎜그리고 Vuex 모듈을 동적으로 추가하려면 저장소의 인스턴스 속성 $store.registerModule을 사용할 수 있습니다. 🎜rrreee🎜이제 Notifications 구성 요소를 사용할 때 모듈 자동등록이 됩니다. 🎜🎜🎜 마무리🎜🎜🎜 대규모 애플리케이션의 Vuex 스토리지는 다양한 모듈을 통해 정적으로 구성됩니다. 이렇습니다. 그러나 매우 특별한 경우에는 스토리지를 확장하고 모듈을 직접 추가해야 할 수도 있습니다. 🎜🎜추천 튜토리얼: "🎜JS Tutorial🎜"🎜

위 내용은 Vue는 Vuex를 동적으로 로드합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!