Если вы хотите создать масштабируемое приложение Vue или Nuxt, вы можете рассмотреть возможность использования Vuex ORM. Я недавно использовал это в проекте, и в этой статье я поделюсь с вами, как это работает и почему, я думаю, вам это тоже понравится.
Что такое Vuex ORM?
Vuex представляет некоторые мощные концепции для управления состоянием вашего приложения, включая хранилище, мутации, действия и так далее.
Vuex ORM — это абстракция Vuex, которая позволяет вам думать о состоянии вашего приложения с точки зрения моделей, например, сообщений, пользователей, заказов и т. Д., А также операций CRUD, например, создания, обновления, удаления и т. Д.
Инструменты ORM (объектно-реляционное отображение) преобразуют данные между несовместимой системой, используя объекты. ORM очень популярны для баз данных.
Вам также может понравиться: Vue.js Tutorial 1 — Hello Vue
Это позволяет значительно упростить ваш код. Например, вместо this.$store.state.commit("UPDATE_USER", { ... })
, вы можете использовать User.update({ ... })
, что делает ваш код Vue гораздо проще рассуждать.
Другие преимущества Vuex ORM заключаются в том, что он уменьшает стандартный код, настраивая необходимые мутации и геттеры, а также облегчает работу с вложенными структурами данных в состоянии вашего приложения.
От Vuex до Vuex ORM
Чтобы продемонстрировать преимущества, давайте проведем рефакторинг некоторого необработанного кода Vuex, используя Vuex ORM.
Мы будем использовать классический пример списка дел, в котором мы можем пометить задачу как выполненную. Вот магазин, который будет представлять это:
магазин / index.js
Джава
xxxxxxxxxx
1
store: {
2
state: { todos: [] },
3
mutations: {
4
MARK_DONE(state, id) {
5
const todo = state.todos.find(todo => todo.id === id);
6
todo.done = true;
7
}
8
}
9
}
Допустим, мы отображаем наши задачи на главной странице приложения. Мы будем использовать вычисляемое свойство todos
и a, v-for
чтобы связать элементы списка дел с шаблоном.
При щелчке по заданию мы помечаем его как «выполненный», принимая обязательство по MARK_DONE
мутации.
компоненты / Home.vue
Джава
xxxxxxxxxx
1
<template>
2
<todo-item
3
v-for="todo in todos"
4
:todo="todo"
5
="markDone(todo.id)"
6
/>
7
</template>
8
<script>
9
export default {
10
computed: {
11
todos() {
12
return this.$store.state.todos;
13
}
14
},
15
methods: {
16
markDone(id) {
17
this.$store.state.commit(MARK_DONE, id);
18
}
19
}
20
}
21
</script>
Путь Vuex ORM
Как я уже сказал, Vuex ORM представляет данные в виде моделей . Таким образом , мы сначала создать модель Todo и определить поля , мы должны были бы как id
, title
и done
.
В отличие от большинства программ Vue, в Vuex ORM для настройки используются классы ES6.
магазин / модель / post.js
Джава
xxxxxxxxxx
1
import { Model } from "@vuex-orm/core";
2
export default class Todo extends Model {
4
static entity = "todos";
5
static fields () {
7
return {
8
id: this.string(""),
9
title: this.string(""),
10
done: this.boolean(false),
11
...
12
};
13
}
14
}
Теперь пришло время зарегистрировать модель в «базе данных» Vuex ORM, что позволяет вам использовать модель.
Пока мы на этом, мы можем зарегистрировать плагин Vuex ORM в Vuex.
магазин / index.js
Джава
xxxxxxxxxx
1
import VuexORM from "@vuex-orm/core";
3
import Todo from "./models/Todo";
4
const database = new VuexORM.Database();
6
database.register(Todo, {});
7
const plugin = VuexORM.install(database);
9
export default {
11
plugins: [plugin]
12
};
С нашим магазином Vuex ORM мы можем начать использовать его в наших компонентах. Сначала импортируйте модель в файл компонента. Теперь вместо использования «странного» синтаксиса Vuex мы можем использовать стандартные методы CRUD для запроса нашего магазина:
компоненты / Home.vue
Джава
xxxxxxxxxx
1
import Todo from "../store/models/todo";
2
export default {
3
computed: {
4
// posts() {
5
// return this.$store.state.todos;
6
// }
7
todos: () => Todos.all();
8
},
9
methods: {
10
markAsRead(id) {
11
// this.$store.state.commit(MARK_DONE, id);
12
Todo.update({
13
where: id,
14
data: { done: true }
15
});
16
}
17
}
18
}
Я не знаю о вас, но я нахожу это намного более читабельным!
Конфиг магазина
Но подождите, где находится конфигурация магазина для модели Todo? Если вы не хотите настроить его, он вам не нужен! Vuex ORM будет автоматически создавать государственные, мутацию и добытчик, которые псевдонимы к модели API , например read
, update
, find
.
Плагины
Более того, вы можете добавить несколько действительно удобных плагинов в Vuex ORM (это верно, плагин для плагина для плагина), включая те, которые абстрагируют ваше взаимодействие с сервером.
Например, есть плагин Axios, конфигурация которого практически равна нулю, если конечные точки модели соответствуют шаблону RESTful.
Скажем, когда наше приложение загружается, оно получает все задачи с сервера и отправляет их в магазин:
Джава
xxxxxxxxxx
1
created() {
2
try {
3
let { data } = await this.$http.get("/todos");
4
data.forEach(todo => this.$store.state.commit(ADD_TODO, todo));
5
} catch (err) {
6
// handle error
7
}
8
}
Плагин Vuex ORM Axios добавляет дополнительные методы модели, например, fetch
которые позволяют заменить приведенный выше код на:
Джава
xxxxxxxxxx
1
created() {
2
Todo.$fetch();
3
}
Насколько это легко?
Ресурсы
Есть еще много информации о Vuex ORM, так что ознакомьтесь с документами:
Узнайте и узнайте, что знают профессионалы о создании, тестировании и развертывании полнофункциональных приложений Vue в нашем последнем курсе. Выучить больше
Дальнейшее чтение
Vue Development в 2019 году: что нужно знать