Vuex-ORM插入和合并两个相互关联的api调用

Question

在我的特殊情况下，我很难理解Vuex-ORM的好处。

我有一个rest API，大多数时候我会设法通过多个api调用来处理我的数据，以显示结果。

例如:有一个对fetchUsers()的调用和一个对fetchPosts的调用，帖子是由用户发出的，并作为userId属性在中关联。

UsersData

const users = [
  {
    id: 1,
    name: 'Leanne Graham',
    username: 'Bret',
    email: 'Sincere@april.biz',
  },
  {
    id: 2,
    name: 'Ervin Howell',
    username: 'Antonette',
    email: 'Shanna@melissa.tv',
  },
  {
    id: 3,
    name: 'Clementine Bauch',
    username: 'Samantha',
    email: 'Nathan@yesenia.net',
  },
  {
    id: 4,

PostData

const posts = [
  {
    userId: 1,
    id: 1,
    title:
      'sunt aut facere repellat provident occaecati excepturi optio reprehenderit',
    body:
      'quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto',
  },
  {
    userId: 2,
    id: 2,
    title: 'qui est esse',
    body:
      'est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla',
  },
  {
    userId: 3,
    id: 3,
    title: 'ea molestias quasi exercitationem repellat qui ipsa sit aut',
    body:
      'et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut',
  },
  {
    userId: 3,
    id: 4,
    title: 'eum et est occaecati',
    body:
      'ullam et saepe reiciendis voluptatem adipisci\nsit amet autem assumenda provident rerum culpa\nquis hic commodi nesciunt rem tenetur doloremque ipsam iure\nquis sunt voluptatem rerum illo velit',
  },
  {
    userId: 5,
    id: 5,
    title: 'nesciunt quas odio',
    body:
      'repudiandae veniam quaerat sunt sed\nalias aut fugiat sit autem sed est\nvoluptatem omnis possimus esse voluptatibus quis\nest aut tenetur dolor neque',
  },
]

有了这个准备，我将在我的store操作中调用这两个api的异步。

import Vue from 'vue'
import Vuex from 'vuex'

// import mock api data
import usersData from '@/data/users'
import postsData from '@/data/posts'

// import to VUEX-ORM Database
import User from '@/store/models/User'
import Post from '@/store/models/Post'

import VuexORM from '@vuex-orm/core'

Vue.use(Vuex)

const database = new VuexORM.Database()

database.register(User)
database.register(Post)

export default new Vuex.Store({
  plugins: [VuexORM.install(database)],
  getters: {
    users: () => {
      return User.all()
    },
    posts: () => {
      return Post.all()
    },
  },
  actions: {
    async fetchUsers() {
      const fetchingUsers = await new Promise((resolve, reject) => {
        return setInterval(() => {
          resolve(usersData)
          reject(
            'Issue on fetching, but usually this is not possible in a mock'
          )
        }, 300)
      })
      User.insert({ data: fetchingUsers })
    },
    async fetchPosts() {
      const fetchingPosts = await new Promise((resolve, reject) => {
        return setInterval(() => {
          resolve(postsData)
          reject(
            'Issue on fetching, but usually this is not possible in a mock'
          )
        }, 300)
      })
      Post.insert({ data: fetchingPosts })
    },
    deleteUser(context, userId) {
      User.delete((user) => user.id === userId)
    },
    addUser(context, userData) {
      userData.id = User.all().length + 1
      User.insertOrUpdate({ data: userData })
    },
  },
  modules: {},
})

我现在想要的是，帖子应该进入相关用户，我的模型是这样定义的：

用户模型

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

export default class User extends Model {
  static entity = 'user'
  static fields() {
    return {
      id: this.attr(null),
      name: this.attr(''),
      username: this.attr(''),
      email: this.attr(''),
      posts: this.hasMany(Post, 'userId')
    }
  }
}

Post模型

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

export default class Post extends Model {
  static entity = 'post'
  static fields() {
    return {
      id: this.attr(null),
      userId: this.belongsTo(User, 'id'),
      title: this.attr(''),
      body: this.attr(''),
    }
  }
}

最大的问题是，为什么我的帖子没有进入我的Users对象，这样我就可以用他们属于的帖子来显示用户。我的用户中的帖子数组是空的。有人知道为什么吗？

​

Answer 1

您在vue-devtools中看到的内容是预期的。

关系不会被插入到存储中，它们被插入到各自的“表”中，并被分配外键来创建对该关系的引用。

当您查询实体以包含关系时，例如User.query().with('posts').get()，您将注意到posts将被填充。但是，存储中的关系字段将始终显示为空数组(对于许多关系)或null (对于单个关系)，因为这只是实体的模式。