Compare commits

...

3 Commits

5 changed files with 171 additions and 59 deletions

159
package-lock.json generated
View File

@ -1900,13 +1900,14 @@
} }
}, },
"@vue/compiler-core": { "@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": { "requires": {
"@babel/parser": "^7.10.4", "@babel/parser": "^7.10.4",
"@babel/types": "^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", "estree-walker": "^2.0.1",
"source-map": "^0.6.1" "source-map": "^0.6.1"
}, },
@ -1914,31 +1915,33 @@
"source-map": { "source-map": {
"version": "0.6.1", "version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", "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": { "@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": { "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": { "@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, "dev": true,
"requires": { "requires": {
"@babel/parser": "^7.10.4", "@babel/parser": "^7.10.4",
"@babel/types": "^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", "consolidate": "^0.15.1",
"estree-walker": "^2.0.1", "estree-walker": "^2.0.1",
"hash-sum": "^2.0.0", "hash-sum": "^2.0.0",
@ -1960,13 +1963,13 @@
} }
}, },
"@vue/compiler-ssr": { "@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, "dev": true,
"requires": { "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": { "@vue/component-compiler-utils": {
@ -2032,36 +2035,58 @@
"dev": true "dev": true
}, },
"@vue/reactivity": { "@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": { "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": { "@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": { "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": { "@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": { "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" "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": { "@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": { "@vue/web-component-wrapper": {
"version": "1.2.0", "version": "1.2.0",
@ -4971,9 +4996,9 @@
} }
}, },
"eslint-plugin-vue": { "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, "dev": true,
"requires": { "requires": {
"eslint-utils": "^2.1.0", "eslint-utils": "^2.1.0",
@ -11039,13 +11064,46 @@
"dev": true "dev": true
}, },
"vue": { "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": { "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": { "vue-eslint-parser": {
@ -11205,6 +11263,11 @@
"integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==", "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
"dev": true "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": { "watchpack": {
"version": "1.7.4", "version": "1.7.4",
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.4.tgz", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.4.tgz",

View File

@ -9,18 +9,39 @@
}, },
"dependencies": { "dependencies": {
"core-js": "^3.6.5", "core-js": "^3.6.5",
"vue": "^3.0.0-0" "vue": "^3.0.0-rc.10",
"vuex": "^4.0.0-0"
}, },
"devDependencies": { "devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0", "@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0", "@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-vuex": "^4.5.4",
"@vue/cli-service": "~4.5.0", "@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", "@vue/eslint-config-prettier": "^6.0.0",
"babel-eslint": "^10.1.0", "babel-eslint": "^10.1.0",
"eslint": "^6.7.2", "eslint": "^6.7.2",
"eslint-plugin-prettier": "^3.1.3", "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" "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"
]
} }

View File

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

View File

@ -1,4 +1,8 @@
import { createApp } from 'vue' import { createApp } from 'vue'
import App from './App.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')

23
src/store/index.js Normal file
View File

@ -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: {}
})