Kurze Einführung in Vuex ORM

Wenn Sie eine skalierbare Vue- oder Nuxt-App erstellen möchten, sollten Sie Vuex ORM verwenden. Ich habe es kürzlich in einem Projekt verwendet, und in diesem Artikel werde ich mit Ihnen teilen, wie es funktioniert und warum ich denke, dass es Ihnen auch gefallen wird.

Haben Sie sich immer noch mit Vuex beschäftigt? Versuchen Sie meinen Artikel WTF ist Vuex? Ein Leitfaden für Anfänger zum Anwendungsdatenspeicher von Vue.

Was ist Vuex ORM

Vuex stellt einige leistungsstarke Konzepte zum Verwalten Ihres Anwendungsstatus vor, einschließlich des Speichers, Mutationen, Aktionen usw.

Vuex ORM ist eine Abstraktion von Vuex, die es Ihnen ermöglicht, Ihren Anwendungsstatus in Bezug auf Modelle, z. B. Posts, Benutzer, Bestellungen usw., und CRUD-Operationen, z. B. Erstellen, Aktualisieren, Löschen usw., zu betrachten.

ORM-Tools (Objektrelationales Mapping) Transformation von Daten zwischen inkompatiblen Systemen mithilfe von Objekten. ORMs sind sehr beliebt für Datenbanken.

Dies ermöglicht eine erhebliche Vereinfachung Ihres Codes. Zum Beispiel eher als this.$store.state.commit("UPDATE_USER", { ... })können Sie verwenden User.update({ ... })was es viel einfacher macht, über Ihren Vue-Code nachzudenken.

Die anderen Vorteile von Vuex ORM bestehen darin, dass es den Boilerplate-Code reduziert, indem es die Mutationen und Getter, die Sie benötigen, automatisch einrichtet, und es auch einfach macht, mit verschachtelten Datenstrukturen in Ihrem Anwendungszustand zu arbeiten.

Von Vuex zu Vuex ORM

Um die Vorteile zu demonstrieren, lassen Sie uns einen rohen Vuex-Code mit Vuex ORM umgestalten.

Wir verwenden ein klassisches To-do-Listenbeispiel, bei dem wir eine Aufgabe als „erledigt“ markieren können. Hier ist der Laden, der das repräsentieren wird:

store/index.js

store: {
  state: { todos: [] },
  mutations: {
    MARK_DONE(state, id) {
      const todo = state.todos.find(todo => todo.id === id);
      todo.done = true;
    }
  }
}

Nehmen wir an, wir zeigen unsere Aufgaben auf der Startseite der App an. Wir verwenden eine berechnete Eigenschaft todos und ein v-for um die To-Do-Elemente mit der Vorlage zu verknüpfen.

Wenn auf eine Aufgabe geklickt wird, markieren wir sie als „erledigt“, indem wir eine Zusage für die machen MARK_DONE Mutation.

Komponenten/Home.vue

<template>
  <todo-item 
    v-for="todo in todos"
    :todo="todo"
    @click="markDone(todo.id)"
  />
</template>
<script>
  export default {
    computed: {
      todos() {
        return this.$store.state.todos;
      }
    },
    methods: {
      markDone(id) {
        this.$store.state.commit(MARK_DONE, id);
      }
    }
  }
<

Der Vuex-ORM-Weg

Wie gesagt, Vuex ORM repräsentiert Daten als Modelle. Also erstellen wir zuerst ein Todo-Modell und definieren die Felder, die wir brauchen würden id, titleund done.

Anders als die meisten Vue-Programme verwendet Vuex ORM ES6-Klassen für die Konfiguration.

store/models/post.js

import { Model } from "@vuex-orm/core";

export default class Todo extends Model {
  static entity = "todos";

  static fields () {
    return {
      id: this.string(""),      
      title: this.string(""),
      done: this.boolean(false),
      ...
    };
  }
}

Jetzt ist es an der Zeit, das Modell in der Vuex ORM „Datenbank“ zu registrieren, wodurch Sie das Modell verwenden können.

Wenn wir schon dabei sind, können wir das Vuex-ORM-Plugin bei Vuex registrieren.

store/index.js

import VuexORM from "@vuex-orm/core";
import Todo from "./models/Todo";

const database = new VuexORM.Database();
database.register(Todo, {});

const plugin = VuexORM.install(database);

export default {
  plugins: [plugin]
};

Wenn unser Vuex ORM Store eingerichtet ist, können wir damit beginnen, ihn in unseren Komponenten zu verwenden. Importieren Sie zunächst das Modell in eine Komponentendatei. Anstatt die “seltsame” Syntax von Vuex zu verwenden, können wir jetzt Standard-CRUD-Methoden verwenden, um unseren Shop abzufragen:

Komponenten/Home.vue

import Todo from "../store/models/todo";
export default {
  computed: {
    
    
    
    todos: () => Todos.all();
  },
  methods: {
    markAsRead(id) {
      
      Todo.update({
        where: id,
        data: { done: true }
      });
    }
  }
}

Ich weiß nicht wie es euch geht, aber ich finde das viel lesenswerter!

Konfig. speichern

Aber Moment mal, wo ist die Store-Konfiguration für das Todo-Modell? Wenn Sie es nicht anpassen möchten, brauchen Sie keine! Vuex ORM erstellt automatisch Status, Mutationen und Getter, die mit der Modell-API verknüpft sind, z read, update, find.

Plugins

Noch besser, Sie können Vuex ORM einige wirklich praktische Plugins hinzufügen (das ist richtig, ein Plugin für ein Plugin für ein Plugin), einschließlich solcher, um Ihre Serverkommunikation zu abstrahieren.

Beispielsweise gibt es ein Axios-Plug-in, das fast ohne Konfiguration auskommt, solange Ihre Modellendpunkte dem RESTful-Muster entsprechen.

Nehmen wir an, wenn unsere App geladen wird, ruft sie alle zu erledigenden Elemente vom Server ab und überträgt sie in den Store:

created() {
  try {
    let { data } = await this.$http.get("/todos");
    data.forEach(todo => this.$store.state.commit(ADD_TODO, todo));
  } catch (err) {
    
  }
}

Das Vuex ORM Axios-Plugin fügt zusätzliche Modellmethoden wie z fetch wodurch Sie den obigen Code ersetzen können durch:

created() {
  Todo.$fetch();
}

Wie einfach ist das?

Ressourcen

Es gibt noch viel mehr über Vuex ORM zu wissen, also schauen Sie sich die Dokumentation an:

Vuex-ORM
Vuex ORM Axios-Plugin

Werden Sie 2020 Senior Vue-Entwickler.

Lernen und beherrschen Sie in unserem neuesten Kurs, was Profis über das Erstellen, Testen und Bereitstellen von Full-Stack-Vue-Apps wissen.

Mehr erfahren


Similar Posts

Leave a Reply

Your email address will not be published.