vuexORM hasMany/belongsTo 关系返回 null

Question

我相信我已经正确地遵循了文档。

我有 2 个模型 Author 和 Book s.t. Author hasMany Book 和 Book belongsTo Author。 author_id 存在于书籍中，但关联为空。使用 Vue 浏览器插件，我看到了对象结构：

$connection:"entities"
$name:"authors"
data:Object
21bc3055-ce90-4119-a68b-9bf2734b596b:Object
$id:"21bc3055-ce90-4119-a68b-9bf2734b596b"
name:"John Doe"
...
books:Array[0]

我看过的书例如：

$connection:"entities"
$name:"books"
data:Object
0537de72-2381-43b3-9132-831701272054:Object
$id:"0537de72-2381-43b3-9132-831701272054"
title:"Some Book"
...
author_id:"21bc3055-ce90-4119-a68b-9bf2734b596b"

以下是模型：

作者模型：

import { Model } from '@vuex-orm/core'
import Book from './book'

class Author extends Model {
    static entity = 'authors'

    static fields () {
        return {
            id: this.attr(null),
            title: this.attr(null)
...,
            books: this.hasMany(Book, 'author_id')
        }
    }
}

export default Author;

书籍型号：

import { Model } from '@vuex-orm/core'
import Author from './author'

class Book extends Model {
    static entity = 'books'

    static fields () {
        return {
            id: this.attr(null),
            name: this.attr(null),
...,
            author_id: this.attr(null),
            author: this.belongsTo(Author, 'author_id')
        }
    }
}

export default Book;

这里是 store/index.js:

import Vue from 'vue'
import Vuex from 'vuex'
import VuexORM from "@vuex-orm/core";
import Author from "./models/author";
import Book from "./models/book";

import * as auth from '../store/modules/auth.js'
import * as authors from './modules/author.js'
import * as books from '../store/modules/books.js'

Vue.use(Vuex);

const database = new VuexORM.Database();
database.register(Author);
database.register(Book);

export default new Vuex.Store({
  plugins: [VuexORM.install(database)],
  modules: {
    auth,
    authors,
    books,
  },
  state: {
  },
  mutations: {
  },
  actions: {
  },
  getters: {
  }
})

添加更新，因为我试图将其视为手动过程。

当我 console.log book（从 vuexORM 商店检索）时，我得到：

{…}
title: (...)
created_at: (...)

...


author: Author {$id: '21bc3055-ce90-4119-a68b-9bf2734b596b', id: '21bc3055-ce90-4119-a68b-9bf2734b596b'…}

author_id: "21bc3055-ce90-4119-a68b-9bf2734b596b"

这似乎表明协会完好无损。

但是当我试图从书中获取作者时，使用：

console.log(book.author)

或

console.log(book['author'])

返回undefined。我如何访问该作者对象？

Answer 1

您需要告诉 VuexORM 首先使用以下方式加载关系：

Book.query().with("author").first()

查看 VuexORM 上的关系文档：https://vuex-orm.org/guide/data/retrieving.html#relationships