Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | <template>
<div class="flex justify-between ml-6 mr-6 mt-4">
<nuxt-link to="/">
<span class="emoji">STRFF</span>
</nuxt-link>
<div class="flex items-center">
<nuxt-link to="/login" v-if="!currentUserName">
<span class="mx-3">Signin</span>
</nuxt-link>
<nuxt-link to="/signup" v-if="!currentUserName">
<span class="mx-3 mr-6">Signup</span>
</nuxt-link>
<div v-if="currentUserName">
<span>Hi {{ currentUserName }}</span>
<a href="#" class="mx-3 mr-6" @click="logout"> Logout </a>
</div>
<button class="go-to-checkout flex items-center" @click="goToCheckout">
<Cart />
<span
class="cart-total-price ml-3 font-semibold text-sm text-indigo-500"
>${{ orderNoOfItems }}</span
>
</button>
</div>
</div>
</template>
<script>
import Cart from "@/components/icons/cart";
import { mapGetters, mapMutations } from "vuex";
export default {
components: {
Cart,
},
computed: {
...mapGetters({
orderNoOfItems: 'order/orderNoOfItems',
currentUserName: 'auth/username',
}),
},
methods: {
logout() {
this.$store.dispatch('auth/logout');
},
goToCheckout() {
const isConnected = this.currentUserName;
if (!isConnected) {
this.$router.push("/login");
return;
}
this.$router.push("/checkout");
},
},
};
</script>
<style>
.emoji {
font-size: 30px;
}
</style>
|