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.