Vuex ORM 快速入门指南：构建优雅的 Vuex 数据层

宁雨澄Alina

于 2025-06-24 09:36:29 发布

阅读量927

点赞数 18

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/gitblog_00126/article/details/148864445

Vuex ORM 快速入门指南：构建优雅的 Vuex 数据层

前言

在现代前端开发中，状态管理是构建复杂应用的关键环节。Vuex 作为 Vue 生态中的官方状态管理方案，虽然功能强大，但在处理结构化数据时仍显不足。这正是 Vuex ORM 的用武之地——它为 Vuex 提供了优雅的 ORM（对象关系映射）能力，让开发者能够以更直观的方式管理应用状态。

核心概念

Vuex ORM 的核心思想是将 Vuex 中的数据视为"数据库"，通过定义"模型"来描述数据结构及其关系。这种方式带来了几个显著优势：

结构化数据管理：通过模型定义清晰的字段结构
自动数据规范化：自动处理嵌套数据的关系
丰富的查询能力：提供类似 ActiveRecord 的查询接口
类型安全：通过模型定义获得更好的代码提示

环境准备

在开始前，请确保：

已安装 Vue 和 Vuex
了解 Vuex 的基本概念（state、mutations、actions 等）
项目配置支持 ES2015+ 语法
如需使用类属性语法，需配置相应 Babel 插件

模型定义

模型是 Vuex ORM 的核心概念，它定义了数据的结构和关系。下面我们通过用户和文章两个典型模型来说明。

用户模型

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

export default class User extends Model {
  // 定义模块名称（对应Vuex中的模块名）
  static entity = 'users'

  // 定义模型字段
  static fields() {
    return {
      id: this.attr(null),    // 主键字段
      name: this.attr(''),    // 字符串字段
      email: this.attr('')    // 字符串字段
    }
  }
}

文章模型（含关联）

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

export default class Post extends Model {
  static entity = 'posts'

  static fields() {
    return {
      id: this.attr(null),
      user_id: this.attr(null),  // 外键字段
      title: this.attr(''),
      body: this.attr(''),
      published: this.attr(false),
      // 定义与用户的关联关系
      author: this.belongsTo(User, 'user_id')
    }
  }
}

模型定义技巧

字段类型：使用 this.attr() 定义基础字段，可传入默认值
关联关系：支持 belongsTo、hasMany 等常见关系
灵活定义：类属性可通过多种方式定义，适应不同编码风格

注册到 Vuex

定义好模型后，需要将其注册到 Vuex 中：

import Vue from 'vue'
import Vuex from 'vuex'
import VuexORM from '@vuex-orm/core'
import User from '@/models/User'
import Post from '@/models/Post'

Vue.use(Vuex)

// 创建数据库实例
const database = new VuexORM.Database()

// 注册模型
database.register(User)
database.register(Post)

// 创建Vuex store并安装插件
const store = new Vuex.Store({
  plugins: [VuexORM.install(database)]
})

export default store

注册后，Vuex ORM 会自动创建 entities 命名空间，所有模型数据都会存储在此命名空间下，结构如下：

{
  entities: {
    posts: { data: {} },
    users: { data: {} }
  }
}

数据操作

插入数据

插入数据时，Vuex ORM 会自动处理数据规范化：

// 在Vue组件中
created() {
  const posts = [
    {
      id: 1,
      title: 'Hello Vuex ORM',
      body: '...',
      author: {  // 嵌套的用户数据
        id: 1,
        name: '张三',
        email: 'zhangsan@example.com'
      }
    }
  ]
  
  Post.insert({ data: posts })
}

插入后，store 中的数据会自动规范化：

{
  posts: {
    data: {
      1: { id: 1, user_id: 1, title: 'Hello Vuex ORM', body: '...' }
    }
  },
  users: {
    data: {
      1: { id: 1, name: '张三', email: 'zhangsan@example.com' }
    }
  }
}

查询数据

Vuex ORM 提供了强大的查询构建器：

// 获取所有文章
const posts = Post.all()

// 带条件的查询
const publishedPosts = Post.query()
  .where('published', true)
  .get()

// 包含关联数据的查询
const postsWithAuthors = Post.query()
  .with('author')
  .get()