Nebucatnetzer
/
vuejs_course
Archived
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

lesson 219: vuex namespaces and modules

master
Andreas Zweili 2021-05-05 13:37:48 +02:00
parent 55338b1fa3
commit e164bff100
14 changed files with 172 additions and 158 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

160
2021-05-04_vuex-01-starting-setup/package-lock.json generated
View File

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

2
2021-05-04_vuex-01-starting-setup/src/components/Changecounter.vue
View File

@ -8,7 +8,7 @@ import { mapActions } from 'vuex';
export default {
methods: {
...mapActions(['increment', 'increase'])
...mapActions('counter', ['increment', 'increase'])
}
};
</script>

2
2021-05-04_vuex-01-starting-setup/src/components/FavoriteValue.vue
View File

@ -8,7 +8,7 @@ import { mapGetters } from 'vuex';
export default {
computed: {
...mapGetters(['finalCounter'])
...mapGetters('counter', ['finalCounter'])
}
};
</script>

2
2021-05-04_vuex-01-starting-setup/src/components/TheCounter.vue
View File

@ -7,7 +7,7 @@ import { mapGetters } from 'vuex';
export default {
computed: {
...mapGetters(['finalCounter'])
...mapGetters('counter', ['finalCounter'])
}
};
</script>

2
2021-05-04_vuex-01-starting-setup/src/main.js
View File

@ -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);

73
2021-05-04_vuex-01-starting-setup/src/store.js
View File

@ -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;

8
2021-05-04_vuex-01-starting-setup/src/store/actions.js Normal file
View File

@ -0,0 +1,8 @@
export default {
login(context) {
context.commit('setAuth', { isAuth: true });
},
logout(context) {
context.commit('setAuth', { isAuth: false });
}
};

5
2021-05-04_vuex-01-starting-setup/src/store/getters.js Normal file
View File

@ -0,0 +1,5 @@
export default {
userIsAuthenticated(state) {
return state.isLoggedIn;
}
};

23
2021-05-04_vuex-01-starting-setup/src/store/index.js Normal file
View File

@ -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;

10
2021-05-04_vuex-01-starting-setup/src/store/modules/counter/actions.js Normal file
View File

@ -0,0 +1,10 @@
export default {
increment(context) {
setTimeout(function() {
context.commit('increment');
}, 2000);
},
increase(context, payload) {
context.commit('increase', payload);
}
};

15
2021-05-04_vuex-01-starting-setup/src/store/modules/counter/getters.js Normal file
View File

@ -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;
}
};

15
2021-05-04_vuex-01-starting-setup/src/store/modules/counter/index.js Normal file
View File

@ -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
};

8
2021-05-04_vuex-01-starting-setup/src/store/modules/counter/mutations.js Normal file
View File

@ -0,0 +1,8 @@
export default {
increment(state) {
state.counter = state.counter + 1;
},
increase(state, payload) {
state.counter = state.counter + payload.value;
}
};

5
2021-05-04_vuex-01-starting-setup/src/store/mutations.js Normal file
View File

@ -0,0 +1,5 @@
export default {
setAuth(state, payload) {
state.isLoggedIn = payload.isAuth;
}
};