Use Vuex to load and add notes.

package-lock.json

@@ -1900,13 +1900,14 @@
       }
     },
     "@vue/compiler-core": {
-      "version": "3.0.0-rc.7",
+      "version": "3.0.0-rc.10",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.0.0-rc.7.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.0.0-rc.10.tgz",
-      "integrity": "sha512-bzk7uGKPEAKC4XHnHvmMUui9MASOVK7e4xgDz6oOBWqo1mnvqk1YnNZzY+0XMaCr4PFOFqHw739JmzJb6SBqUg==",
+      "integrity": "sha512-kQzHzRsM0NPAWHeqSTb2J4VsHhjRkGeLTsGzeMnW+sojgTnS3T94KacwvYgVS4qeZAKiDq0bMNZoJWrHVQ3T8g==",
+      "dev": true,
       "requires": {
         "@babel/parser": "^7.10.4",
         "@babel/types": "^7.10.4",
-        "@vue/shared": "3.0.0-rc.7",
+        "@vue/shared": "3.0.0-rc.10",
         "estree-walker": "^2.0.1",
         "source-map": "^0.6.1"
       },
@@ -1914,31 +1915,33 @@
         "source-map": {
           "version": "0.6.1",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
         }
       }
     },
     "@vue/compiler-dom": {
-      "version": "3.0.0-rc.7",
+      "version": "3.0.0-rc.10",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.0.0-rc.7.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.0.0-rc.10.tgz",
-      "integrity": "sha512-wE8YmkN3ISodjijzG44YiRgbcb7skqdRbhoYgABGz8uHvNSMGPLrM80cRosgLoGlcgxDPxj0xaEAczBunJYV2g==",
+      "integrity": "sha512-pqIUf5leZm0P9379utrRSVBMxhV8XaqJTEFFp5etCtbEa/H5ALs29EjFMtMcm9sQaVkZlKLu86mgIacbYB9Q3w==",
+      "dev": true,
       "requires": {
-        "@vue/compiler-core": "3.0.0-rc.7",
+        "@vue/compiler-core": "3.0.0-rc.10",
-        "@vue/shared": "3.0.0-rc.7"
+        "@vue/shared": "3.0.0-rc.10"
       }
     },
     "@vue/compiler-sfc": {
-      "version": "3.0.0-rc.7",
+      "version": "3.0.0-rc.10",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.0.0-rc.7.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.0.0-rc.10.tgz",
-      "integrity": "sha512-4DSOw7yczVf5E+Dbs9/OmyEmG2zWsDx7dmOYWcv75LOj2/dqOys3fVtcJfsfeIXzKBTy51hX80+P1lB0nWq32g==",
+      "integrity": "sha512-VIJ+VXqeM7WoRNgD9uYSARVb6CYq+JS2NNHfeerfNc7Uk3pjYHRv1MwEicAvN6zWFm5GLC1ZYTVD+WFg3xGAkQ==",
       "dev": true,
       "requires": {
         "@babel/parser": "^7.10.4",
         "@babel/types": "^7.10.4",
-        "@vue/compiler-core": "3.0.0-rc.7",
+        "@vue/compiler-core": "3.0.0-rc.10",
-        "@vue/compiler-dom": "3.0.0-rc.7",
+        "@vue/compiler-dom": "3.0.0-rc.10",
-        "@vue/compiler-ssr": "3.0.0-rc.7",
+        "@vue/compiler-ssr": "3.0.0-rc.10",
-        "@vue/shared": "3.0.0-rc.7",
+        "@vue/shared": "3.0.0-rc.10",
         "consolidate": "^0.15.1",
         "estree-walker": "^2.0.1",
         "hash-sum": "^2.0.0",
@@ -1960,13 +1963,13 @@
       }
     },
     "@vue/compiler-ssr": {
-      "version": "3.0.0-rc.7",
+      "version": "3.0.0-rc.10",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.0.0-rc.7.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.0.0-rc.10.tgz",
-      "integrity": "sha512-jXNEgnhjm/SStdwxrHaGwYgSvwQV8ZV7xInCsdZsEcNXNSV4cveuEQG0x/mFO/xuD+RudcdMTbQr75V5oi2RyQ==",
+      "integrity": "sha512-JBPil8sO5j7puB8acX2CQMRXEYB/EP8PoEur7RcF/+aqATI7C4yqWcSLC5TRJpigj6xE6ku6sx8om+j7ZHvgBw==",
       "dev": true,
       "requires": {
-        "@vue/compiler-dom": "3.0.0-rc.7",
+        "@vue/compiler-dom": "3.0.0-rc.10",
-        "@vue/shared": "3.0.0-rc.7"
+        "@vue/shared": "3.0.0-rc.10"
       }
     },
     "@vue/component-compiler-utils": {
@@ -2032,36 +2035,58 @@
       "dev": true
     },
     "@vue/reactivity": {
-      "version": "3.0.0-rc.7",
+      "version": "3.0.0-rc.10",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.0.0-rc.7.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.0.0-rc.10.tgz",
-      "integrity": "sha512-j8wUuc131JrHvQzEWjlRMYHadRLhGaubIZHR+4QO/xwvNIdJWK8zQd9iqxizjBW0E1MhrZkDbsiClNN8lq/ILQ==",
+      "integrity": "sha512-mkUZfOJlbqGZx2cARmhCs5r2+xLJPL7VFNagmlA3Fd66ZXBc3ZvTQdYsY4VUbYJFe5ByIzqu9TZiAkzXY+JVaA==",
       "requires": {
-        "@vue/shared": "3.0.0-rc.7"
+        "@vue/shared": "3.0.0-rc.10"
+      },
+      "dependencies": {
+        "@vue/shared": {
+          "version": "3.0.0-rc.10",
+          "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.0.0-rc.10.tgz",
+          "integrity": "sha512-fI6gVhhgb3cAmEkY4oeVVA2hWZ2xvkgogHdBI5PL7gSvZnOB6XZ2eQGsYjC4W+7BegvEkoMBuZsFXVa4ZQ07XQ=="
+        }
       }
     },
     "@vue/runtime-core": {
-      "version": "3.0.0-rc.7",
+      "version": "3.0.0-rc.10",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.0.0-rc.7.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.0.0-rc.10.tgz",
-      "integrity": "sha512-xY+3Mw+3Nb8BxfYftQug3UAUHPJPvbhNkyVuCMVgBRBsZIFbiL6F+gy22Wd7Q6zgWagUQCtH1FDrPZARj6tySg==",
+      "integrity": "sha512-VK/kq4gDDoqZ45CVwdbLLpikXLYLCt6YLhdgXX3fhf20gvPqrbEZv1ZNLruNnhhTpf9cLyU4tZ18DHeaUYPziw==",
       "requires": {
-        "@vue/reactivity": "3.0.0-rc.7",
+        "@vue/reactivity": "3.0.0-rc.10",
-        "@vue/shared": "3.0.0-rc.7"
+        "@vue/shared": "3.0.0-rc.10"
+      },
+      "dependencies": {
+        "@vue/shared": {
+          "version": "3.0.0-rc.10",
+          "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.0.0-rc.10.tgz",
+          "integrity": "sha512-fI6gVhhgb3cAmEkY4oeVVA2hWZ2xvkgogHdBI5PL7gSvZnOB6XZ2eQGsYjC4W+7BegvEkoMBuZsFXVa4ZQ07XQ=="
+        }
       }
     },
     "@vue/runtime-dom": {
-      "version": "3.0.0-rc.7",
+      "version": "3.0.0-rc.10",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.0.0-rc.7.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.0.0-rc.10.tgz",
-      "integrity": "sha512-tgLl/tSIdovP/6uEzKrhwG5MwFu0yJ3l0bPUCyyFJM4tnnHiRtr9Zsn6GVDZYwImtBgBwByqBMML8ZYlVEqH9w==",
+      "integrity": "sha512-bH4GuneHt3FQ+/21jba5orM/CO9N1cnT7J3wtrxopFJ4/4H5cvHXyG6v+ZVTu1d733Ij/6yMRA7xbtfi9a4zJw==",
       "requires": {
-        "@vue/runtime-core": "3.0.0-rc.7",
+        "@vue/runtime-core": "3.0.0-rc.10",
-        "@vue/shared": "3.0.0-rc.7",
+        "@vue/shared": "3.0.0-rc.10",
         "csstype": "^2.6.8"
+      },
+      "dependencies": {
+        "@vue/shared": {
+          "version": "3.0.0-rc.10",
+          "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.0.0-rc.10.tgz",
+          "integrity": "sha512-fI6gVhhgb3cAmEkY4oeVVA2hWZ2xvkgogHdBI5PL7gSvZnOB6XZ2eQGsYjC4W+7BegvEkoMBuZsFXVa4ZQ07XQ=="
+        }
       }
     },
     "@vue/shared": {
-      "version": "3.0.0-rc.7",
+      "version": "3.0.0-rc.10",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.0.0-rc.7.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.0.0-rc.10.tgz",
-      "integrity": "sha512-wRqe6DvR9UIH4Il4bxMIbuGupWFtJW+PZKqgclYjuO+zWNQEC7hC5OxONgXeGcv1h4KtfJsc8wSU31hxok9XAQ=="
+      "integrity": "sha512-fI6gVhhgb3cAmEkY4oeVVA2hWZ2xvkgogHdBI5PL7gSvZnOB6XZ2eQGsYjC4W+7BegvEkoMBuZsFXVa4ZQ07XQ==",
+      "dev": true
     },
     "@vue/web-component-wrapper": {
       "version": "1.2.0",
@@ -4971,9 +4996,9 @@
       }
     },
     "eslint-plugin-vue": {
-      "version": "7.0.0-beta.2",
+      "version": "7.0.0-beta.3",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-7.0.0-beta.2.tgz",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-7.0.0-beta.3.tgz",
-      "integrity": "sha512-EpAVWT62JTM7Yo6IUJIaIvNMSuayDaMVMXv1SC96d1/7nyx18U0FrLRKpN2GdTY8Efi4UepgR75XW7ucSRiI7A==",
+      "integrity": "sha512-/p23IRPN9gFNN7dzesrctt06Kvs9E3VRB8BGIAPSEaQNk5yhlKUzntPARjUpsTWW+DQg0mqglZptfkUJK4+4EQ==",
       "dev": true,
       "requires": {
         "eslint-utils": "^2.1.0",
@@ -11039,13 +11064,46 @@
       "dev": true
     },
     "vue": {
-      "version": "3.0.0-rc.7",
+      "version": "3.0.0-rc.10",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-3.0.0-rc.7.tgz",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.0.0-rc.10.tgz",
-      "integrity": "sha512-WX7i6yI0VGzI2mwlGqfISDbi/fNAuc0QEOcF4NH4IEdWFUWCbMMUJ6frYCgRd3FzqzPJwuV8niXKhFL28FnQ7g==",
+      "integrity": "sha512-nRsyIQtOWLDMBb5dsPwg/WdIqznCMVWN6O6wJSzhseKC768wHlZKcJ7SPHhWPid9wi3Ykhtl9vtgvxTK/qICkw==",
       "requires": {
-        "@vue/compiler-dom": "3.0.0-rc.7",
+        "@vue/compiler-dom": "3.0.0-rc.10",
-        "@vue/runtime-dom": "3.0.0-rc.7",
+        "@vue/runtime-dom": "3.0.0-rc.10",
-        "@vue/shared": "3.0.0-rc.7"
+        "@vue/shared": "3.0.0-rc.10"
+      },
+      "dependencies": {
+        "@vue/compiler-core": {
+          "version": "3.0.0-rc.10",
+          "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.0.0-rc.10.tgz",
+          "integrity": "sha512-kQzHzRsM0NPAWHeqSTb2J4VsHhjRkGeLTsGzeMnW+sojgTnS3T94KacwvYgVS4qeZAKiDq0bMNZoJWrHVQ3T8g==",
+          "requires": {
+            "@babel/parser": "^7.10.4",
+            "@babel/types": "^7.10.4",
+            "@vue/shared": "3.0.0-rc.10",
+            "estree-walker": "^2.0.1",
+            "source-map": "^0.6.1"
+          }
+        },
+        "@vue/compiler-dom": {
+          "version": "3.0.0-rc.10",
+          "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.0.0-rc.10.tgz",
+          "integrity": "sha512-pqIUf5leZm0P9379utrRSVBMxhV8XaqJTEFFp5etCtbEa/H5ALs29EjFMtMcm9sQaVkZlKLu86mgIacbYB9Q3w==",
+          "requires": {
+            "@vue/compiler-core": "3.0.0-rc.10",
+            "@vue/shared": "3.0.0-rc.10"
+          }
+        },
+        "@vue/shared": {
+          "version": "3.0.0-rc.10",
+          "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.0.0-rc.10.tgz",
+          "integrity": "sha512-fI6gVhhgb3cAmEkY4oeVVA2hWZ2xvkgogHdBI5PL7gSvZnOB6XZ2eQGsYjC4W+7BegvEkoMBuZsFXVa4ZQ07XQ=="
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        }
       }
     },
     "vue-eslint-parser": {
@@ -11205,6 +11263,11 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "vuex": {
+      "version": "4.0.0-beta.4",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-4.0.0-beta.4.tgz",
+      "integrity": "sha512-/+4E1dokq5cwbl4mohOqOj8h0vOLOWmLSqlqTf++bfmN9/JKWtwYfsBrzlK0sYrNfuYcpQeX0BVxQHoHXDfYZQ=="
+    },
     "watchpack": {
       "version": "1.7.4",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.4.tgz",

package.json

@@ -9,18 +9,39 @@
   },
   "dependencies": {
     "core-js": "^3.6.5",
-    "vue": "^3.0.0-0"
+    "vue": "^3.0.0-rc.10",
+    "vuex": "^4.0.0-0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",
     "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-plugin-vuex": "^4.5.4",
     "@vue/cli-service": "~4.5.0",
-    "@vue/compiler-sfc": "^3.0.0-0",
+    "@vue/compiler-sfc": "^3.0.0-rc.10",
     "@vue/eslint-config-prettier": "^6.0.0",
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
     "eslint-plugin-prettier": "^3.1.3",
-    "eslint-plugin-vue": "^7.0.0-0",
+    "eslint-plugin-vue": "^7.0.0-beta.3",
     "prettier": "^1.19.1"
-  }
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/vue3-essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "babel-eslint"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
 }

src/components/NoteList.vue

@@ -19,24 +19,25 @@
 </template>
 
 <script>
+import { mapState } from 'vuex'
+
 export default {
   data() {
     return {
-      notes: [
-        { id: 0, text: 'This is a note' },
-        { id: 1, text: 'And another one.' }
-      ],
       current: null,
       content: null
     }
   },
   methods: {
     addNote() {
-      this.notes.push({ id: this.notes.length, text: this.content })
+      this.$store.commit('ADD_NOTE', {
+        id: this.notes.length,
+        text: this.content
+      })
       this.content = ''
     }
   },
-  computed: {},
+  computed: mapState(['notes']),
   mounted() {
     document.addEventListener('keyup', e => {
       switch (e.code) {

src/main.js

@@ -1,4 +1,8 @@
 import { createApp } from 'vue'
 import App from './App.vue'
+import store from './store/index.js'
 
-window.app = createApp(App).mount('#app')
+window.app = createApp(App)
+  .use(store)
+  .use(store)
+  .mount('#app')

src/store/index.js

@@ -0,0 +1,23 @@
+import { createStore } from 'vuex'
+
+export default createStore({
+  state() {
+    return {
+      notes: [{ id: 1, text: 'A note from the Vuex store!' }]
+    }
+  },
+  mutations: {
+    FETCH_NOTES(state) {
+      state.notes = [
+        {
+          id: 1,
+          text: 'Note loaded via mutation from Vuex!'
+        }
+      ]
+    },
+    ADD_NOTE(state, note) {
+      state.notes.push(note)
+    }
+  },
+  actions: {}
+})