Vuex-ORM
勉強会の録画(社員のみ閲覧可)
Meetsで上がったテキスト
TLDR:
Vuex ORM は何？
何故 Vuex ORM が必要か？
何故 Vuex ORM はこんなに簡単的に解決できるか？
Vuex ORM 使い方
Vuex ORM 裏側の思想
Vuex ORM plugins が必要か
注意点
個人の感想
React プロジェクトに何を使う？
Vuex ORM は何？
https://gyazo.com/ba4d5b4cc30eb3006120cbdfc3ee5240
Object-Relational Mapping access
create normalized data schema
fluent API to get, search and update, sort
何故 Vuex ORM が必要か
Issue with Nested Relational Data
GET /v1/posts
code: posts
users = {id: }, {id:1, name: 'User 1'}, {id}
posts = [
{
id: 1,
body: '.....',
author: { id: 1, name: 'User 1' },
comments: [
{ id: 1, comment: '.....', author: { id: '1', name: 'User 2' } },
{ id: 2, comment: '.....', author: { id: 2, name: 'User 2' } },
],
},
{
id: 2,
author: { id: 2, name: 'User 2' },
body: '.....',
comments: [
{ id: 3, comment: '.....', author: { id: 3, name: 'User 3' } },
{ id: 4, comment: '.....', author: { id: 1, name: 'User 1' } },
{ id: 5, comment: '.....', author: { id: 3, name: 'User 3' } },
],
},
// And so on...
]
要望
user(id: 1) name 'User 1' -> 'TJ'
一般的に実装方法
code: raw javascript
const newName = 'TJ'
let index = users.findIndex((user) => user.id === 1)
let user = usersindex
user.name = newName
// 1. update users
users.splice(index, 1, user)
// 2. update posts
posts.map((post) => {
cons { author } = post
const newAuthor = author.id == 1 ? {...author, name: newName} : author
// 3. update post.comments
const comments = post.comments.map((comment) => {
const { author } = comment
const newAuthor = author.id === 1 ? {...author, name: newName} : author
return {...comment, author: newAuthor}
})
})
課題：コード行数が多い、理解にくい
Vuex ORM 実装方法
code: orm
User.update({
where: 1,
data: {
name: 'TJ'
}
})
何故 Vuex ORM はこんなに簡単的に解決できるか？
Normalized data ですから
code: normalized data
Post.create(posts)
//
Post.insert(posts0)
Post.insert(posts1)
data = {
posts: {
1: { id: 1, user_id: 1, body: '.....' },
2: { id: 2, user_id: 2, body: '.....' }
},
comments: {
1: { id: 1, user_id: 2, post_id: 1, comment: '.....', sub: { id: hahaha, content: ''} },
2: { id: 2, user_id: 2, post_id: 1, comment: '.....' },
3: { id: 3, user_id: 3, post_id: 2, comment: '.....' },
4: { id: 4, user_id: 1, post_id: 2, comment: '.....' },
5: { id: 5, user_id: 3, post_id: 2, comment: '.....' }
},
users: {
1: { id: 1, name: 'User 1' },
2: { id: 2, name: 'User 2' },
3: { id: 3, name: 'User 3' }
}
}
Post.query().with('comments.content').get()
要望
user(id: 1) name 'User 1' -> 'TJ'
code:raw javascript with normalized data
data.users.1.name = 'TJ'
比較
code: vuex-orm
User.update({
where: 1,
data: {
name: 'TJ'
}
})
何故 Vuex ORM は直接 object を変えないですか？
Vuex は直接 state を更新することが禁止だ。だから mutations が必要だ。
Vuex ORM 使い方
1. Define Models https://vuex-orm.org/guide/prologue/getting-started.html#define-models
2. Register Models to Vuex https://vuex-orm.org/guide/prologue/getting-started.html#register-models-to-vuex
3. Mutation Data https://vuex-orm.org/guide/prologue/getting-started.html#retrieving-data
Vuex ORM 裏側の思想
ORM https://www.google.com/search?q=orm
normalized data
schema driven development
Vuex ORM plugins が必要か
特に https://github.com/vuex-orm/plugin-axios
自分は利用しない、でも利用しても反対しない
https://gyazo.com/34dfeeeca5c80624c9cfd11454233ad2
注意点
1. normalize と denormalize はコンビネーション
Vuex ORMに、normalizing data は自動でやる
Vuex ORMに、denormalize は $toJson() を利用する https://vuex-orm.org/guide/digging-deeper/serialization.html
2. Load Nested Relation が手動でやる必要
Vuex ORMに、with を利用する https://vuex-orm.org/guide/data/retrieving.html#relationships
まとめ
良い点
1. 強制的に MVC、Model 管理やすい
2. ソースコードが短い、読みやすい
3. Vuex とぴったり
悪い点
1. Frontend に遠い概念
2. Doc が英語しかない
個人の感想
シンプルプロジェクトが不要
JavaScript まだ詳しくない人が注意
試して、好きなら使って、好きではないなら使わない
React プロジェクトに何を使う？
https://github.com/paularmstrong/normalizr
ArakiTakaki.icon Twitterがコレ使ってた記憶あります！
https://github.com/immerjs/immer
#Normalized_Data
#schema_driven_development
#Vuex
#勉強会
create by TJ