为什么vuex-orm在关系字段中返回null？

Question

我在Vuex ORM中遵循了Defining Relationships的指南。

我做的所有事情都像指南一样，那么为什么我在文章模型的类别字段中得到空值？

codesandbox

这就是我如何定义我的模型(文章中的类别是: hasOne/belongTo)：

export class Category extends Model {
  static entity = "categories";

  static primaryKey = "_id";

  static fields() {
    return {
      _id: this.attr(null),
      name: this.attr("")
    };
  }
}


export class Article extends Model {
  static entity = "articles";

  static primaryKey = "_id";

  static fields() {
    return {
      _id: this.attr(null),
      name: this.attr(""),
      category: this.hasOne(Category, "_id")
    };
  }
}

在main.js中使用vuex配置Vuex-orm

import VuexORM from "@vuex-orm/core";
import { Article, Category } from "./models";

Vue.use(Vuex);

const database = new VuexORM.Database();

const Articles = {
  namespaced: true,

  actions: {
    test() {
      console.log(this);
    }
  }
};

const Categories = {
  namespaced: true,

  actions: {
    test() {
      console.log(this);
    }
  }
};

database.register(Article, Articles);
database.register(Category, Categories);

const store = new Vuex.Store({
  plugins: [VuexORM.install(database)]
});

在app组件中，我将数据插入到vuex中，并获得如下值：

 const articleData = [
      {
        _id: "6ce9bae00000000000000000",
        name: "article-1",
        category: "5ce9acd00000000000000000"
      }
    ];
    const categoryData = [
      { _id: "5ce9acd00000000000000000", name: "category-1" }
    ];

    const x = await Article.insertOrUpdate({ data: articleData });
    const y = await Category.insertOrUpdate({ data: categoryData });

    const a = Article.query()
      .with("category")
      .first();

    console.log({ a });
    console.log({ type: a.category });
    console.log("why a.category is null???");

Answer 1

首先，文章和类别之间的关系可能是一对多的关系，但是代码的问题在于您定义模型和插入数据的方式。

在您的示例中，您试图在关系目标上提供一个外键(我是一篇文章，并且我知道我所属的类别id )。这种关系在Vuex-ORM中是一对一的反向关系。

为了获得预期的行为，请按如下方式更改您的Article模型：

export class Article extends Model {
  static entity = "articles";

  static primaryKey = "_id";

  static fields() {
    return {
      _id: this.attr(null),
      name: this.attr(""),
      category_id: this.attr(""),
      category: this.belongsTo(Category, "category_id")
    };
  }
}

请注意，您显式地将category_id定义为文章模型上的一个单独字段，而不是指向类别模型上的id字段。这在所有Vuex-ORM关系中都是相同的模式。category字段存储已解析的关系目标对象，因此您可以将类别对象作为目标。这是在使用.with(Category)查询之后由Vuex-ORM填写的，不应该包含在您插入的数据中。

尽管这没有多大意义，但修复原始示例并使用标准的一对一定义模型如下所示：

export class Article extends Model {
  static entity = "articles";

  static primaryKey = "_id";

  static fields() {
    return {
      _id: this.attr(null),
      name: this.attr(""),
      category: this.hasOne(Category, "article_id")
    };
  }
}

export class Category extends Model {
  static entity = "categories";

  static primaryKey = "_id";

  static fields() {
    return {
      _id: this.attr(null),
      name: this.attr(""),
      article_id: this.attr(null),
    };
  }
}

并在传递给Article.insertOrUpdate的数据中提供一个article_id。