0

在我的特殊情况下，这里有问题要了解 Vuex-ORM 的好处。

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

例如：有一个 call forfetchUsers()和一个 call for 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,

发布数据

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: {},
})

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

用户模型

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

后模型

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

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

4

1 回答 1

2

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

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

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

于 2021-05-16T23:45:08.163 回答