Автор оригинала: Anthony Gore.
Если вы хотите сделать масштабируемое приложение VUE или NUXT, вы можете рассмотреть возможность использования Vuex ORM. Недавно я использовал его в проекте, и в этой статье я поделюсь с вами, как это работает и почему я думаю, что вам тоже понравится.
Все еще добивая голову вокруг Vuex? Попробуйте моя статья WTF – Vuex? Руководство для начинающих для хранения данных о приложении Vue.
Что такое Vuex Orm
Vuex вводит некоторые мощные концепции для управления состоянием вашего приложения, включая магазин, мутации, действия и т. Д.
Vuex Orm – это абстракция Vuex, которая позволяет вам подумать о вашем состоянии приложения с точки зрения моделей E.g. Сообщения, пользователи, заказы, и т. Д., Крудные операции, например Создание, обновление, удаление и т. Д.
ORM Tools (объектно-реляционное отображение) преобразование данных между несовместимой системой с использованием объектов. ОРМ очень популярны для баз данных.
Это позволяет для известного упрощения вашего кода. Например, а не Это. $ store.state.commit ("update_user", {...}) Вы можете использовать User.update ({...}) Создание вашего Vue Code намного легче рассуждать.
Другие преимущества Vuex ORM заключаются в том, что он уменьшает код котельной, настроив мутации и Getter, вам потребуется автоматически, а также облегчает работу со вложенными структурами данных в состоянии вашего приложения.
От Vue до Vuex Orm
В качестве способа продемонстрирования преимуществ, давайте Refactor Rear Code Vuex с помощью Vuex Orm.
Мы будем использовать пример классического списка TO-DO, где мы можем отметить «сделано». Вот магазин, который будет представлять:
магазин/index.js.
store: {
state: { todos: [] },
mutations: {
MARK_DONE(state, id) {
const todo = state.todos.find(todo => todo.id === id);
todo.done = true;
}
}
}
Допустим, мы показываем наши товары на домашней странице приложения. Мы будем использовать компьютерную недвижимость Тодос и а V-для Чтобы связать элементы TO-DO для шаблона.
Когда нажал на договор, мы отметим его как «сделано», делая коммит к Mark_done мутация.
Компоненты/home.vue.