From e164bff10026f60436bb6bf934b779d65c56cf44 Mon Sep 17 00:00:00 2001 From: Andreas Zweili Date: Wed, 5 May 2021 13:37:48 +0200 Subject: [PATCH] lesson 219: vuex namespaces and modules --- .../package-lock.json | 160 +++++++++--------- .../src/components/Changecounter.vue | 2 +- .../src/components/FavoriteValue.vue | 2 +- .../src/components/TheCounter.vue | 2 +- 2021-05-04_vuex-01-starting-setup/src/main.js | 2 +- .../src/store.js | 73 -------- .../src/store/actions.js | 8 + .../src/store/getters.js | 5 + .../src/store/index.js | 23 +++ .../src/store/modules/counter/actions.js | 10 ++ .../src/store/modules/counter/getters.js | 15 ++ .../src/store/modules/counter/index.js | 15 ++ .../src/store/modules/counter/mutations.js | 8 + .../src/store/mutations.js | 5 + 14 files changed, 172 insertions(+), 158 deletions(-) delete mode 100644 2021-05-04_vuex-01-starting-setup/src/store.js create mode 100644 2021-05-04_vuex-01-starting-setup/src/store/actions.js create mode 100644 2021-05-04_vuex-01-starting-setup/src/store/getters.js create mode 100644 2021-05-04_vuex-01-starting-setup/src/store/index.js create mode 100644 2021-05-04_vuex-01-starting-setup/src/store/modules/counter/actions.js create mode 100644 2021-05-04_vuex-01-starting-setup/src/store/modules/counter/getters.js create mode 100644 2021-05-04_vuex-01-starting-setup/src/store/modules/counter/index.js create mode 100644 2021-05-04_vuex-01-starting-setup/src/store/modules/counter/mutations.js create mode 100644 2021-05-04_vuex-01-starting-setup/src/store/mutations.js diff --git a/2021-05-04_vuex-01-starting-setup/package-lock.json b/2021-05-04_vuex-01-starting-setup/package-lock.json index 8d93bbf..6d69c2f 100644 --- a/2021-05-04_vuex-01-starting-setup/package-lock.json +++ b/2021-05-04_vuex-01-starting-setup/package-lock.json @@ -1754,6 +1754,16 @@ "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==", "dev": true }, + "ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "optional": true, + "requires": { + "color-convert": "^2.0.1" + } + }, "cacache": { "version": "13.0.1", "resolved": "https://registry.npmjs.org/cacache/-/cacache-13.0.1.tgz", @@ -1780,6 +1790,53 @@ "unique-filename": "^1.1.1" } }, + "chalk": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz", + "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==", + "dev": true, + "optional": true, + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + }, + "color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "optional": true, + "requires": { + "color-name": "~1.1.4" + } + }, + "color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true, + "optional": true + }, + "has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true, + "optional": true + }, + "loader-utils": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz", + "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==", + "dev": true, + "optional": true, + "requires": { + "big.js": "^5.2.2", + "emojis-list": "^3.0.0", + "json5": "^2.1.2" + } + }, "ssri": { "version": "7.1.0", "resolved": "https://registry.npmjs.org/ssri/-/ssri-7.1.0.tgz", @@ -1790,6 +1847,16 @@ "minipass": "^3.1.1" } }, + "supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "optional": true, + "requires": { + "has-flag": "^4.0.0" + } + }, "terser-webpack-plugin": { "version": "2.3.8", "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-2.3.8.tgz", @@ -1806,6 +1873,18 @@ "terser": "^4.6.12", "webpack-sources": "^1.4.3" } + }, + "vue-loader-v16": { + "version": "npm:vue-loader@16.2.0", + "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.2.0.tgz", + "integrity": "sha512-TitGhqSQ61RJljMmhIGvfWzJ2zk9m1Qug049Ugml6QP3t0e95o0XJjk29roNEiPKJQBEi8Ord5hFuSuELzSp8Q==", + "dev": true, + "optional": true, + "requires": { + "chalk": "^4.1.0", + "hash-sum": "^2.0.0", + "loader-utils": "^2.0.0" + } } } }, @@ -11229,87 +11308,6 @@ } } }, - "vue-loader-v16": { - "version": "npm:vue-loader@16.2.0", - "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.2.0.tgz", - "integrity": "sha512-TitGhqSQ61RJljMmhIGvfWzJ2zk9m1Qug049Ugml6QP3t0e95o0XJjk29roNEiPKJQBEi8Ord5hFuSuELzSp8Q==", - "dev": true, - "optional": true, - "requires": { - "chalk": "^4.1.0", - "hash-sum": "^2.0.0", - "loader-utils": "^2.0.0" - }, - "dependencies": { - "ansi-styles": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", - "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", - "dev": true, - "optional": true, - "requires": { - "color-convert": "^2.0.1" - } - }, - "chalk": { - "version": "4.1.1", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz", - "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==", - "dev": true, - "optional": true, - "requires": { - "ansi-styles": "^4.1.0", - "supports-color": "^7.1.0" - } - }, - "color-convert": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", - "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", - "dev": true, - "optional": true, - "requires": { - "color-name": "~1.1.4" - } - }, - "color-name": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", - "dev": true, - "optional": true - }, - "has-flag": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", - "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", - "dev": true, - "optional": true - }, - "loader-utils": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz", - "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==", - "dev": true, - "optional": true, - "requires": { - "big.js": "^5.2.2", - "emojis-list": "^3.0.0", - "json5": "^2.1.2" - } - }, - "supports-color": { - "version": "7.2.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", - "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", - "dev": true, - "optional": true, - "requires": { - "has-flag": "^4.0.0" - } - } - } - }, "vue-style-loader": { "version": "4.1.3", "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.3.tgz", diff --git a/2021-05-04_vuex-01-starting-setup/src/components/Changecounter.vue b/2021-05-04_vuex-01-starting-setup/src/components/Changecounter.vue index 8dc246c..7ac3e6d 100644 --- a/2021-05-04_vuex-01-starting-setup/src/components/Changecounter.vue +++ b/2021-05-04_vuex-01-starting-setup/src/components/Changecounter.vue @@ -8,7 +8,7 @@ import { mapActions } from 'vuex'; export default { methods: { - ...mapActions(['increment', 'increase']) + ...mapActions('counter', ['increment', 'increase']) } }; diff --git a/2021-05-04_vuex-01-starting-setup/src/components/FavoriteValue.vue b/2021-05-04_vuex-01-starting-setup/src/components/FavoriteValue.vue index 0a88f73..b26f129 100644 --- a/2021-05-04_vuex-01-starting-setup/src/components/FavoriteValue.vue +++ b/2021-05-04_vuex-01-starting-setup/src/components/FavoriteValue.vue @@ -8,7 +8,7 @@ import { mapGetters } from 'vuex'; export default { computed: { - ...mapGetters(['finalCounter']) + ...mapGetters('counter', ['finalCounter']) } }; diff --git a/2021-05-04_vuex-01-starting-setup/src/components/TheCounter.vue b/2021-05-04_vuex-01-starting-setup/src/components/TheCounter.vue index e260d87..b5b63eb 100644 --- a/2021-05-04_vuex-01-starting-setup/src/components/TheCounter.vue +++ b/2021-05-04_vuex-01-starting-setup/src/components/TheCounter.vue @@ -7,7 +7,7 @@ import { mapGetters } from 'vuex'; export default { computed: { - ...mapGetters(['finalCounter']) + ...mapGetters('counter', ['finalCounter']) } }; diff --git a/2021-05-04_vuex-01-starting-setup/src/main.js b/2021-05-04_vuex-01-starting-setup/src/main.js index 7c2ac18..108c4d2 100644 --- a/2021-05-04_vuex-01-starting-setup/src/main.js +++ b/2021-05-04_vuex-01-starting-setup/src/main.js @@ -1,7 +1,7 @@ import { createApp } from 'vue'; import App from './App.vue'; -import store from './store.js'; +import store from './store/index.js'; const app = createApp(App); diff --git a/2021-05-04_vuex-01-starting-setup/src/store.js b/2021-05-04_vuex-01-starting-setup/src/store.js deleted file mode 100644 index 9766490..0000000 --- a/2021-05-04_vuex-01-starting-setup/src/store.js +++ /dev/null @@ -1,73 +0,0 @@ -import { createStore } from 'vuex'; - -const counterModule = { - state() { - return { - counter: 0 - }; - }, - actions: { - increment(context) { - setTimeout(function() { - context.commit('increment'); - }, 2000); - }, - increase(context, payload) { - context.commit('increase', payload); - } - }, - mutations: { - increment(state) { - state.counter = state.counter + 1; - }, - increase(state, payload) { - state.counter = state.counter + payload.value; - } - }, - getters: { - finalCounter(state) { - return state.counter * 3; - }, - normalizedCounter(_, getters) { - const finalCounter = getters.finalCounter; - if (finalCounter < 0) { - return 0; - } - if (finalCounter > 100) { - return 100; - } - return finalCounter; - } - } -}; - -const store = createStore({ - modules: { - counter: counterModule - }, - state() { - return { - isLoggedIn: false - }; - }, - mutations: { - setAuth(state, payload) { - state.isLoggedIn = payload.isAuth; - } - }, - getters: { - userIsAuthenticated(state) { - return state.isLoggedIn; - } - }, - actions: { - login(context) { - context.commit('setAuth', { isAuth: true }); - }, - logout(context) { - context.commit('setAuth', { isAuth: false }); - } - } -}); - -export default store; diff --git a/2021-05-04_vuex-01-starting-setup/src/store/actions.js b/2021-05-04_vuex-01-starting-setup/src/store/actions.js new file mode 100644 index 0000000..1542b6d --- /dev/null +++ b/2021-05-04_vuex-01-starting-setup/src/store/actions.js @@ -0,0 +1,8 @@ +export default { + login(context) { + context.commit('setAuth', { isAuth: true }); + }, + logout(context) { + context.commit('setAuth', { isAuth: false }); + } +}; diff --git a/2021-05-04_vuex-01-starting-setup/src/store/getters.js b/2021-05-04_vuex-01-starting-setup/src/store/getters.js new file mode 100644 index 0000000..28abc2d --- /dev/null +++ b/2021-05-04_vuex-01-starting-setup/src/store/getters.js @@ -0,0 +1,5 @@ +export default { + userIsAuthenticated(state) { + return state.isLoggedIn; + } +}; diff --git a/2021-05-04_vuex-01-starting-setup/src/store/index.js b/2021-05-04_vuex-01-starting-setup/src/store/index.js new file mode 100644 index 0000000..3400b9f --- /dev/null +++ b/2021-05-04_vuex-01-starting-setup/src/store/index.js @@ -0,0 +1,23 @@ +import { createStore } from 'vuex'; + +import rootMutations from './mutations.js' +import rootActions from './actions.js' +import rootGetters from './getters.js' + +import counterModule from './modules/counter/index.js'; + +const store = createStore({ + modules: { + counter: counterModule + }, + state() { + return { + isLoggedIn: false + }; + }, + mutations: rootMutations, + getters: rootGetters, + actions: rootActions +}); + +export default store; diff --git a/2021-05-04_vuex-01-starting-setup/src/store/modules/counter/actions.js b/2021-05-04_vuex-01-starting-setup/src/store/modules/counter/actions.js new file mode 100644 index 0000000..8ea6cad --- /dev/null +++ b/2021-05-04_vuex-01-starting-setup/src/store/modules/counter/actions.js @@ -0,0 +1,10 @@ +export default { + increment(context) { + setTimeout(function() { + context.commit('increment'); + }, 2000); + }, + increase(context, payload) { + context.commit('increase', payload); + } +}; diff --git a/2021-05-04_vuex-01-starting-setup/src/store/modules/counter/getters.js b/2021-05-04_vuex-01-starting-setup/src/store/modules/counter/getters.js new file mode 100644 index 0000000..56cec00 --- /dev/null +++ b/2021-05-04_vuex-01-starting-setup/src/store/modules/counter/getters.js @@ -0,0 +1,15 @@ +export default { + finalCounter(state) { + return state.counter * 3; + }, + normalizedCounter(_, getters) { + const finalCounter = getters.finalCounter; + if (finalCounter < 0) { + return 0; + } + if (finalCounter > 100) { + return 100; + } + return finalCounter; + } +}; diff --git a/2021-05-04_vuex-01-starting-setup/src/store/modules/counter/index.js b/2021-05-04_vuex-01-starting-setup/src/store/modules/counter/index.js new file mode 100644 index 0000000..01a33ec --- /dev/null +++ b/2021-05-04_vuex-01-starting-setup/src/store/modules/counter/index.js @@ -0,0 +1,15 @@ +import counterActions from './actions.js'; +import counterGetters from './getters.js'; +import counterMutations from './mutations.js'; + +export default { + namespaced: true, + state() { + return { + counter: 0 + }; + }, + actions: counterActions, + mutations: counterMutations, + getters: counterGetters +}; diff --git a/2021-05-04_vuex-01-starting-setup/src/store/modules/counter/mutations.js b/2021-05-04_vuex-01-starting-setup/src/store/modules/counter/mutations.js new file mode 100644 index 0000000..2ce5e61 --- /dev/null +++ b/2021-05-04_vuex-01-starting-setup/src/store/modules/counter/mutations.js @@ -0,0 +1,8 @@ +export default { + increment(state) { + state.counter = state.counter + 1; + }, + increase(state, payload) { + state.counter = state.counter + payload.value; + } +}; diff --git a/2021-05-04_vuex-01-starting-setup/src/store/mutations.js b/2021-05-04_vuex-01-starting-setup/src/store/mutations.js new file mode 100644 index 0000000..5e75a00 --- /dev/null +++ b/2021-05-04_vuex-01-starting-setup/src/store/mutations.js @@ -0,0 +1,5 @@ +export default { + setAuth(state, payload) { + state.isLoggedIn = payload.isAuth; + } +};