Динамическая загрузка модулей Vuex

Development, Java | Amber | Комментировать запись

Vuex – это простое и производительное средство для управления состоянием. Оно упрощает управление крупными приложениями Vue.js, обеспечивает предсказуемость изменения состояния и предоставляет централизованное хранилище данных. Возможно, ранее вы уже слышали о Vuex.

Читайте также: Введение в Vuex: управление состоянием Vue.js

Вы можете определить модули в своем хранилище 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 (в файле notifications/Notifications.vue):

import state from "./state";

export default {

  // ...

  created() {

    this.$store.registerModule("notifications", state);

  }

};

Теперь модуль будет зарегистрирован при использовании компонентов уведомлений.

Заключение

В больших приложениях хранилище Vuex организовано статически с помощью различных модулей. Так и должно быть. Но иногда, в конкретных случаях вам может потребоваться расширить хранилище и динамически добавить модуль.

Найти рабочую демонстрацию и код из этой статьи можно в этой песочнице Codesandbox.