lesson 212: mutations with payload
This commit is contained in:
parent
8be97b49de
commit
b84be204f4
|
@ -1,8 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
<base-container title="Vuex">
|
<base-container title="Vuex">
|
||||||
<the-counter></the-counter>
|
<the-counter></the-counter>
|
||||||
|
<favorite-value></favorite-value>
|
||||||
<change-counter></change-counter>
|
<change-counter></change-counter>
|
||||||
<button @click="increaseCounter">Add 1</button>
|
<button @click="increaseCounter">Add 10</button>
|
||||||
</base-container>
|
</base-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -10,17 +11,19 @@
|
||||||
import BaseContainer from './components/BaseContainer.vue';
|
import BaseContainer from './components/BaseContainer.vue';
|
||||||
import TheCounter from './components/TheCounter.vue';
|
import TheCounter from './components/TheCounter.vue';
|
||||||
import ChangeCounter from './components/Changecounter';
|
import ChangeCounter from './components/Changecounter';
|
||||||
|
import FavoriteValue from './components/FavoriteValue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
BaseContainer,
|
BaseContainer,
|
||||||
TheCounter,
|
TheCounter,
|
||||||
ChangeCounter
|
ChangeCounter,
|
||||||
|
FavoriteValue
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
increaseCounter() {
|
increaseCounter() {
|
||||||
this.$store.commit('increment');
|
this.$store.commit('increase', { value: 10 });
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
@ -0,0 +1,14 @@
|
||||||
|
<template>
|
||||||
|
<h3>{{ counter }}</h3>
|
||||||
|
<p>More...</p>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
computed: {
|
||||||
|
counter() {
|
||||||
|
return this.$store.state.counter;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
|
@ -9,6 +9,9 @@ const store = createStore({
|
||||||
mutations: {
|
mutations: {
|
||||||
increment(state) {
|
increment(state) {
|
||||||
state.counter = state.counter + 1;
|
state.counter = state.counter + 1;
|
||||||
|
},
|
||||||
|
increase(state, payload) {
|
||||||
|
state.counter = state.counter + payload.value;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
Reference in New Issue