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

Question

在我的特殊情况下无法理解 Vuex-ORM 的好处。

我休息 API，大部分时间我设法通过多次 api 调用来处理我的数据以显示结果。

例如：有对 fetchUsers() 的呼吁和对 fetchPosts 的呼吁，帖子是由用户发布的，并且在内部作为 userId 道具相关。

用户数据

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,

Post数据

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',
  },
]

以此为准备，我将在我的商店操作中调用这两个 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: {},
})

我现在想要的是 Posts 应该进入那里相关的用户我的模型定义如下：

用户模型

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(''),
    }
  }
}

一个大问题是，为什么我的 Post 没有进入我的用户对象，所以我可以显示用户及其所属的帖子。我的用户中的帖子数组是空的。有人知道为什么吗？

Answer 1

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

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

当您查询您的实体以包含关系时，即 User.query().with('posts').get() 您会注意到将填充帖子。然而，商店中的关系字段将始终显示为空数组（对于许多关系）或 null（对于单个关系），因为这只是实体的模式。

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

Vuex-ORM insert and merge two api calls related to each other

javascript

vue.js

vuex

vuex-orm