Adds vuex-orm and examples

References:
sequelize/sequelize#7840 (comment)
vuejs/vetur#762 (comment)
https://github.com/Dmitriy-91/darquest1-18/blob/master/darquest/src/store/index.js

Author: gervasiocaj

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"
   },

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: '[email protected]',
+        },
+      })
+    })
+
+    return {
+      entities,
+    }
   },
 })
 </script>

src/components/HelloWorld.vue

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

src/models.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)],
 })

src/store/index.ts

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "es6",
     "module": "esnext",
     "strict": true,
     "jsx": "preserve",

tsconfig.json

@@ -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/[email protected]":
   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"