55 lines
1.0 KiB
Vue
55 lines
1.0 KiB
Vue
<template>
|
|
<base-container title="Vuex" v-if="userIsAuthenticated">
|
|
<the-counter></the-counter>
|
|
<favorite-value></favorite-value>
|
|
<change-counter></change-counter>
|
|
<button @click="increaseCounter">Add 10</button>
|
|
</base-container>
|
|
<base-container>
|
|
<user-auth></user-auth>
|
|
</base-container>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters } from 'vuex';
|
|
|
|
import BaseContainer from './components/BaseContainer.vue';
|
|
import TheCounter from './components/TheCounter.vue';
|
|
import ChangeCounter from './components/Changecounter';
|
|
import FavoriteValue from './components/FavoriteValue';
|
|
import UserAuth from './components/UserAuth';
|
|
|
|
export default {
|
|
components: {
|
|
BaseContainer,
|
|
TheCounter,
|
|
ChangeCounter,
|
|
FavoriteValue,
|
|
UserAuth
|
|
},
|
|
|
|
methods: {
|
|
increaseCounter() {
|
|
this.$store.dispatch('increase', { value: 10 });
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters(['userIsAuthenticated'])
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
font-family: sans-serif;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
}
|
|
</style>
|