From f3ac9bb2d65da252cbafe74a76255e95d9fbfb21 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gerv=C3=A1sio=20J=C3=BAnior?= <juniorb08@gmail.com>
Date: Thu, 1 Jul 2021 18:25:15 -0300
Subject: [PATCH] Adds vuex-orm and examples

References:
https://github.com/sequelize/sequelize/issues/7840#issuecomment-317212324
https://github.com/vuejs/vetur/issues/762#issuecomment-712246564
https://github.com/Dmitriy-91/darquest1-18/blob/master/darquest/src/store/index.js
---
 package.json                  |  1 +
 src/App.vue                   | 27 ++++++++++++++++++++++-----
 src/components/HelloWorld.vue | 16 ----------------
 src/models.ts                 | 28 ++++++++++++++++++++++++++++
 src/store/index.ts            |  6 ++++++
 tsconfig.json                 |  2 +-
 yarn.lock                     | 12 ++++++++++++
 7 files changed, 70 insertions(+), 22 deletions(-)
 delete mode 100644 src/components/HelloWorld.vue
 create mode 100644 src/models.ts

diff --git a/package.json b/package.json
index 4211ff1..61a7aea 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
     "build": "vue-cli-service build"
   },
   "dependencies": {
+    "@vuex-orm/core": "^0.36.4",
     "vue": "^3.0.0",
     "vuex": "^4.0.0-0"
   },
diff --git a/src/App.vue b/src/App.vue
index 2ba500d..0510dfb 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,15 +1,32 @@
 <template>
-  <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
+  <h1>state entities</h1>
+  <pre>{{ entities }}</pre>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
-import HelloWorld from './components/HelloWorld.vue'
+import { defineComponent, ref, onMounted } from 'vue'
+import { useStore } from 'vuex'
+import { User } from '@/models'
 
 export default defineComponent({
   name: 'App',
-  components: {
-    HelloWorld,
+  setup() {
+    const { state } = useStore()
+    const entities = ref(state.entities)
+
+    onMounted(async () => {
+      await User.insert({
+        data: {
+          id: 1,
+          name: 'John Doe',
+          email: 'john@example.com',
+        },
+      })
+    })
+
+    return {
+      entities,
+    }
   },
 })
 </script>
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
deleted file mode 100644
index 8271d86..0000000
--- a/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  name: 'HelloWorld',
-  props: {
-    msg: String,
-  },
-})
-</script>
diff --git a/src/models.ts b/src/models.ts
new file mode 100644
index 0000000..26d9af1
--- /dev/null
+++ b/src/models.ts
@@ -0,0 +1,28 @@
+import { Model } from '@vuex-orm/core'
+
+export class User extends Model {
+  static entity = 'users'
+
+  static fields() {
+    return {
+      id: this.attr(null),
+      name: this.attr(''),
+      email: this.attr(''),
+    }
+  }
+}
+
+export 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'),
+    }
+  }
+}
diff --git a/src/store/index.ts b/src/store/index.ts
index 7d3d8ea..571ada0 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -1,8 +1,14 @@
 import { createStore } from 'vuex'
+import VuexORM from '@vuex-orm/core'
+import * as models from '@/models'
+
+const database = new VuexORM.Database()
+for (let model of Object.values(models)) database.register(model)
 
 export default createStore({
   state: {},
   mutations: {},
   actions: {},
   modules: {},
+  plugins: [VuexORM.install(database)],
 })
diff --git a/tsconfig.json b/tsconfig.json
index 8059333..97e0728 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "es6",
     "module": "esnext",
     "strict": true,
     "jsx": "preserve",
diff --git a/yarn.lock b/yarn.lock
index 2e372c8..2853a01 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -505,6 +505,13 @@
   resolved "https://registry.yarnpkg.com/@vue/web-component-wrapper/-/web-component-wrapper-1.3.0.tgz#b6b40a7625429d2bd7c2281ddba601ed05dc7f1a"
   integrity sha512-Iu8Tbg3f+emIIMmI2ycSI8QcEuAUgPTgHwesDU1eKMLE4YC/c/sFbGc70QgMq31ijRftV0R7vCm9co6rldCeOA==
 
+"@vuex-orm/core@^0.36.4":
+  version "0.36.4"
+  resolved "https://registry.yarnpkg.com/@vuex-orm/core/-/core-0.36.4.tgz#9e2b1b8dfd74c2a508f1862ffa3e4a2c1e4cc60c"
+  integrity sha512-Wkq1G+FtcEQ4LbhEZUZalhuErb2nY2nuBo2UeGVpbVKkMss5piJhw7bt5TpWecDNmIUc2BzaenDDqm08AAe7Hw==
+  dependencies:
+    normalizr "^3.6.0"
+
 "@webassemblyjs/ast@1.9.0":
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.9.0.tgz#bd850604b4042459a5a41cd7d338cbed695ed964"
@@ -4562,6 +4569,11 @@ normalize-url@^3.0.0:
   resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-3.3.0.tgz#b2e1c4dc4f7c6d57743df733a4f5978d18650559"
   integrity sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg==
 
+normalizr@^3.6.0:
+  version "3.6.1"
+  resolved "https://registry.yarnpkg.com/normalizr/-/normalizr-3.6.1.tgz#d367ab840e031ff382141b8d81ce279292ff69fe"
+  integrity sha512-8iEmqXmPtll8PwbEFrbPoDxVw7MKnNvt3PZzR2Xvq9nggEEOgBlNICPXYzyZ4w4AkHUzCU998mdatER3n2VaMA==
+
 npm-run-path@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"